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 相关文章推荐
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
JavaScript中的ArrayBuffer详细介绍
Dec 08 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
深入探寻javascript定时器
Jan 02 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
jQuery实现容器间的元素拖拽功能
Dec 01 jQuery
详解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
cache_lite试用
2007/02/14 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
php实现登陆模块功能示例
2016/10/20 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
js简单抽奖代码
2015/01/16 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Django如何自定义分页
2018/09/25 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python如何实现图片压缩
2020/09/11 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
关于孝道的演讲稿
2014/05/21 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
2014年残联工作总结
2014/11/21 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
Python实现排序方法常见的四种
2021/07/15 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
Python Matplotlib库实现画局部图
2021/11/17 Python