Vue项目中Router路由中meta字段的妙用-案例

深碍√TFBOYSˉ_ 2022-08-30 11:42 132阅读 0赞

> 用Vue做网站登录验证时常用到Vue-Router官方路由器管理，这时候会调用beforeEach函数

// 登录验证
    beforeEach((to,from,next) =>{
          if(to.path === '/music'){    //页面path为 '/music',就让它跳转到 '/login'登录页面
              next({/login})
          }else{
              next()
          }
    })

> 上述功能单一，且不便于扩展
> 
> 根目录是/music的所有路径都会受到限制，这就是vue router中meta 字段（路由元信息）存在的意义

### beforeEach(to,from,next)\{\}钩子函数中 ###

> to 和 from 都是路由对象，路由对象有以下对象属性：  
> $route.path  
> 类型: string  
> 字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
> 
> $route.params  
> 类型: Object  
> 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
> 
> route.query.user == 1，如果没有查询参数，则是个空对象。
> 
> $route.hash  
> 类型: string  
> 当前路由的 hash 值 (带 \#) ，如果没有 hash 值，则为空字符串。
> 
> $route.fullPath  
> 类型: string  
> 完成解析后的 URL，包含查询参数和 hash 的完整路径。
> 
> $route.matched  
> 类型: Array<RouteRecord>

> 用这些路由对象属性就能够限制根目录为 /music的所有页面了

import Vue from 'vue'
    import Router from 'vue-router '
    
    Vue.user(Router)
    
    
    
    const router = new Router({
          routes:[
              {
                path:'/login',
                component:()=>import(@/pages/Login/template.vue)
              },
              {
                path:'/music',
                component:() => import(@/pages/Music/template.vue) ,
                meta: { requiresAuth: true }
              },
               Children:[
                    {
                      {
                          path:'/download',
                          component:() => import(@/pages/Download/template.vue) ,
                          meta: { requiresAuth: true }
                      },
                    {
                        path:'/share',
                        component:() => import(@/pages/Share/template.vue) ,
                        meta: { requiresAuth: true }
                      },
                    {
                        path:'/buy',
                        component:() => import(@/pages/Buy/template.vue) ,
                        meta: { requiresAuth: true }
                    },
                  
                   },
              {
                path:'/listen',
                component:() => import(@/pages/Listen/template.vue) 
              },
              {
                path:'/index',
                component:() => import(@/pages/Index/template.vue) 
              },
              {
                path:'/detail',
                component:() => import(@/pages/Detail/template.vue) 
              },
          ]
    })
    //路由限制
    router.beforeEach((to,from,next) => {
          if(to.matched.some((item)=>{
                return item.meta.requiresAuth    //如果是item 下面 meta 带有requiresAuth字段的组件都能跳转到 '/login'目录下
          })){
                next("/login")
          }else{
            next()
          }
    })