vue路由文件相关配置

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

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