学习--动态路由

vue-router传参

vue-router传值 可以通过地址传值

最简单的是url传值 url传值又两种，params和query参数传值

params传值 是指的动态路由传值

{path:'/user/:id'} //定义一个路由参数
<router-link to="/user/123"></router-link>//传值
/user/123
'/user/:id'  ---123就是id


this.$route.params.id //取值 专门获取：id这种参数params参数

query传值，指通过？后面的拼接参数传值

<router-link to="/user?id=123"></router-link> //传值
this.$route.query.id //取值 获取？后面的参数 query参数 查询字符

前端鉴权

我们可以在axios的请求拦截器里面配置token

1：有些axios请求 需要token 我们是可以配置请求拦截器

2：有些页面 需要登录才能看，我们也可以用路由导航守卫 router.beforeEach 判断token

3：新情况？侧边栏有很多，那么后台侧边栏 有不同的人登录 应该展示不同的侧边栏

 

登录成功 后台返回token

jwt json web token 是后台专门用来生成token字符串

后台可以返回这个登录人可以看的，路由数组列表

前端拿到路由数组后，需要使用vue路由的一个规定写法

router.addRoutes(路由数组)

router.beforeEach((to,from,next)=>{
   //判断user信息是否已经获取
    if(token){
        //根据用户的角色类型来生成对应的新路由
        const newRouter = [{path:"/xxx" ...}] ...

        //将新路由添加到路由中

        router.addRoutes(newRouter)
        //为了正确渲染导航，将对应的新的路由添加到vuex中
        渲染对应的侧边栏
    }



})

如果是前端 就先写一个全的 所有的 路由数组

登录之后 后台返回 当前的登录人的数据 比如路由列表 

前端拿到路由列表 去循环 和你全的路由数组进行匹配。