vue路由文件相关配置

vue路由文件相关配置
- 一、vue嵌套路由路径斜杠'/'的使用
- - 1.根组件上的path
  - 2.根组件上的redirect
  - 3.子组件里面的path
  - 总结
- 二、路由守卫
- - 1、作用
  - 2、分类
  - 3、全局守卫
  - 4、独享路由守卫：某一个路由所独享的；
  - 5、组件内路由守卫
- 三、vue路由中的meta

vue路由文件相关配置

一、vue嵌套路由路径斜杠’/'的使用

路径前加/代表根路径，绝对路径，不加斜杠是相对路径

{path: '/about',name: 'about',redirect: '/home',component: function () {return import('@/views/AboutView.vue')},children: [{path: '/home',name: 'home',component: function () {return import('@/views/HomeView.vue')},meta:{requireAuth:true}}]}

1.根组件上的path

如果为/about，浏览器地址栏输入 http://localhost:8080/about

如果为about(不加/)，浏览器地址栏输入 http://localhost:8080/home 可以直接访问到吗？

答案是：不可以。原因是，不加/代表相对路径，它的相对位置在哪，我也不知道，但这里不是/

所以记着，这个路径前面一定要加“/”

2.根组件上的redirect

这个加不加“/”都一样，因为默认是加上的，redirect为重定向，默认使用绝对路径

3.子组件里面的path

（只要能访问到子组件，父组件就会被渲染出来）
同样的如果其值为：/home代表绝对路径，通过浏览器http://localhost:8080/index 可以直接访问到

如果是 home(不加/) 呢，它代表是相对路径，那相对于谁呢，当然是父组件了。因此，如果你想访问次子组件就要这样访问
http://localhost:8080/home/index

总结

根组件中的path必须加‘/’,因为不知道其相对谁
子组件（children）中的path加不加都可以，但在浏览器中输入的地址不同：
‘/home’: localhost:8080/home
‘home’: localhost:8080/about/home

参考原文链接：https://blog.csdn.net/weixin_43887184/article/details/103546681

二、路由守卫

1、作用

对路由进行权限控制；

2、分类

全局守卫、独享守卫、组件内守卫；

3、全局守卫

全局前置守卫，初始化时执行，每次路由切换前执行

切换路由之前判断即将前往的路由是否需要登录，如果不需要直接跳转，如果需要则再判断当前是否已登录，若未登录跳转到登录页，已登录跳转至下一页

router.beforeEach((to,from,next)=>{if(to.meta.isAuth){//判断是否需要鉴权if(localStorage.getItem('token')==='token'){next()}else{next('/login')}}else{next()}
})

全局后置路由守卫，初始化时执行，每次路由切换之后被调用

router.afterEach(()=>{if(to.meta.isAuth){//判断是否需要鉴权document.title=to.meta.title}else{document.title='vue_test'}
})

4、独享路由守卫：某一个路由所独享的；

beforeEnter:(to,from,next)=>{if(to.meta.isAuth){//判断是否需要鉴权if(localStorage.getItem('token')==='token'){next()}}else{next()}
}

5、组件内路由守卫

通过路由规则进入该组件时调用

beforeRouteEnter(to,from,next){console.log('beforeRouteEnter');if(to.meta.isAuth){//判断是否需要鉴权if(localStorage.getItem('token')==='token'){next()}}else{next()}
}

通过路由规则离开该组件时调用

 beforeRouteLeave(to,from,next){next()}

原文链接：https://blog.csdn.net/qq_49916504/article/details/125350312

三、vue路由中的meta

我们经常会在进入一个页面时判断是否已经登陆，经常会用到路由导航守卫router.beforeEach(to, from, next), 一个两个页面还好，但是多的话，就会麻烦，并且路由还会嵌套。这时可以使用meta。

meta （元数据）
在配置路由时，经常会用到path,name,component,还有一个就是meta 元数据，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。经常用它来做登录校验。

const routes = [{path: '/',name: 'tryPage',component: function () {return import('@/views/tryPage.vue')},meta: {requireAuth: false,title: 'tryPage'}},{path: '/about',name: 'about',redirect: '/home',component: function () {return import('@/views/AboutView.vue')},children: [{path: 'home',name: 'home',component: function () {return import('@/views/HomeView.vue')},meta: {requireAuth: true,title: 'home'}}]}
]

配合路由守卫实现某些页面需要已登录的状态才能进入的功能

router.beforeEach((to,from,next)=>{if(to.meta.requireAuth){//判断是否需要鉴权if(localStorage.getItem('token')==='token'){next()}else{next('/login')}}else{next()}
})

meta中还可以根据自身需要定义其他参数，比如title,通过监听$route.meta.title对特定页面作出处理

参考原文链接：https://blog.csdn.net/qiaoqiaoBigBoss/article/details/112908640

本文结合了多篇站内帖子用以自身记录总结学习，如有侵权请联系我修改