vue 项目中当访问路由不存在的时候默认访问404页面操作


Posted in Javascript onAugust 31, 2020

前言:

在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白。然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面。

一般的处理方法是:

在最后添加一个path: * ,优先级从上到下查找路由,都没有的时候全部指向 404页面 ,代码如下:

const baseRoute = [
 { path: '/login', name: 'login', component: Login },
 {path: '/', redirect: '/index', component: Layout, name: 'dashboard'},
 // 404page
 { path: '/404', name: 'page404', component: page404 },
 {
 path: '/',
 redirect: '/index',
 component: Layout,
 children: [
 {
 path: 'index',
 name: 'index',
 component: ModeIndex,
 meta: {
  title: '', // 设备建模
  icon: ''
 }
 },
 {
 path: 'project',
 name: 'project',
 component: Project,
 meta: {
  dynamic: true, // 动态面包屑标题
  title: ''
 }
 }
 ]
 }
 {
 path: '*', // 页面不存在的情况下会跳到404页面
 redirect: '/404',
 name: 'notFound',
 hidden: true
 }
]
const router = new Router({
 routes: baseRoute
})

问题:

这样做好处是简单,方便,但是因为我代码里面添加了如下代码,用于页面token失效跳出登录的时候记住当前路由,当下次再登录的时候直接跳到指定路由

if (to.path.slice(1) !== '') {
  router.push({
  path: '/login',
  query: {
  redirect: to.path.slice(1)
  }
  })
 } else {
 router.push({
  path: '/login'
 })
 }

就是因为加了所有找不到都指向404,导致了第一次不知道网址的人输错后,redirect就指向了404,这样用户第一次登录成功后页面就进入404,体验很差,产品和测试也一直以为是页面出bug了,为了解决这个问题,查找了相关资料,下面是优化后的方法。

优化后的设置方式: 

1、route --> index.js

末尾去掉 * --> 404

const baseRoute = [
 { path: '/login', name: 'login', component: Login },
 {path: '/', redirect: '/index', component: Layout, name: 'dashboard'},
// 404page
 {path: '/404', component: page404, name: 'page404'}, 
 {
 path: '/',
 redirect: '/index',
 component: Layout,
 children: [
 {
 path: 'index',
 name: 'index',
 component: ModeIndex,
 meta: {
  title: '', // 设备建模
  icon: ''
 }
 },
 {
 path: 'project',
 name: 'project',
 component: Project,
 meta: {
  dynamic: true, // 动态面包屑标题
  title: ''
 }
 }
 ]
 },
 // {
 // path: '*', // 页面不存在的情况下会跳到404页面
 //redirect: '/404',
 //name: 'notFound',
 //hidden: true
 //}
]
const router = new Router({
 routes: baseRoute
})

2、在router.beforeEach 里面使用 to.matched 匹配出的路由个数来作为判断条件,匹配不到路由就跳转到404页面,代码如下

pemmision.js

代码如下:

import router from './router'
import { getCookie } from './utils/auth'

// 通过beforeEach钩子来判断用户是否登陆过 有无token
const whiteList = ['/login'] // 不重定向白名单
// const userInfo = getUserInfo()

router.beforeEach((to, from, next) => {
 console.log(to.matched)
 // 判断是否有登录过
 if (getCookie('userId_dev')) {
 // 如果包含userId_dev 从登录页面跳转 直接跳转到首页 /
 if (to.path === '/login') {
 next()
 } else {
 if (to.matched.length === 0) {
 next('/404') // 判断此跳转路由的来源路由是否存在,存在的情况跳转到来源路由,否则跳转到404页面
 }
 next() // 如果匹配到正确跳转
 }
 // 没有登录
 } else {
 if (whiteList.indexOf(to.path) !== -1) {
 next()
 } else {
 // 还没有登录过 则跳转到登录界面
 // next('/login')
 if (to.path.slice(1) !== '') {
 if (to.matched.length === 0) {
  router.push({
  path: '/login'
  })
 } else {
  router.push({
  path: '/login',
  query: {
  redirect: to.path.slice(1)
  }
  })
 }
 } else {
 router.push({
  path: '/login'
 })
 }
 }
 }
})

这样就解决了一开始输错就跳到404的尴尬了!

补充知识:Vue中用户输入无效地址,跳转到错误提示页面

1. 在动态路由中,有的路径是无效路径,可以让无效的路劲跳转到错误提示页面

组件的$router属性的原型上有一些方法(this.$router)

vue 项目中当访问路由不存在的时候默认访问404页面操作

(1)go方法

(2)replace:用新的路径替换错误路径,同时创建错误页面的组件

a——b(不存在的路径)——c(用c取代了b);所以路径中就是a——c

(3)push:a——b(不存在的路径)——c(在b后面添加了c);所以路径就是a——b——c

vue 项目中当访问路由不存在的时候默认访问404页面操作

以上这篇vue 项目中当访问路由不存在的时候默认访问404页面操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js对象数组按属性快速排序
Jan 31 Javascript
JS实现可改变列宽的table实例
Jul 02 Javascript
php与js的区别是什么
Aug 05 Javascript
js电话号码验证方法
Sep 28 Javascript
理解Javascript图片预加载
Feb 23 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
react.js 翻页插件实例代码
Jan 19 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
详解vue v-model
Aug 31 #Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 #Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 #Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 #Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 #Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 #Javascript
JS遍历树层级关系实现原理解析
Aug 31 #Javascript
You might like
Discuz 模板语句分析及知识技巧
2009/08/21 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
javascript的push使用指南
2014/12/05 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中的引用和拷贝浅析
2014/11/22 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
怎么写好自荐信
2013/10/30 职场文书
团队经理竞聘书
2014/03/31 职场文书
2014年档案室工作总结
2014/12/01 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
中学图书馆工作总结
2015/08/11 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
聊聊redis-dump工具安装问题
2022/01/18 Redis
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL
volatile保证可见性及重排序方法
2022/08/05 Java/Android