系列文章目录


提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加


例如：第一章 Python 机器学习入门之pandas的使用


提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档


前言

实现页面拦截有原本的组件展示，比如必须登录才能跳转商品页面

例如：登录拦截页面

一、路由拦截

1.首先在你需要拦截的路由界面的配置字段中去添加一个额外的属性，例如自定义属性meta

  {

    path: '/cart',

    name: 'cart',

    component: () => import(/* webpackChunkName: "about" */ '../views/CartView.vue'),

    // meta属于路由元数据信息 给组件添加一些额外的属性  例如自定义属性

    meta:{

      isNeedLogin:true

    }

2.router下的index,js文件下，全局的路由配置里获取原数据信息

思路如下

2.1  获取路由的原数据信息 ，取出登录成功的凭证，

2.2   判断那些页面需要进行登录判断

router.beforeEach((to,from,next)=>{
  // 1获取路由的元数据信息
  console.log(to)
  let {isNeedLogin} = to.meta  
  // 取出登录成功之后保存的登录凭证
  let token = localStorage.getItem("s1")
  console.log(isNeedLogin)
  // 2判断哪些页面需要进行登录判断
  if(isNeedLogin){
    // 证明页面需要进行登录
    if(!token){
      // 证明没有登录 去登录页面 next("/路由地址") 跳转功能
      // to.fullPath 跳转的目标路由地址  /cart
      next(`/login?toPath=${to.fullPath}`)
    }else{
      // 证明登陆过了
      next()
    }
  }else{
    // 证明页面不需要登录
    next()  //继续跳转到对应的页面
  }
})

3.我们跳转别的页面可以，可不能在自己的页面跳转自己的页面，这时候就需要在导航路由设置

字段方法：退出登录之后跳回首页：代码如下

<script>

  export default{

    methods:{

      f1(){

        localStorage.removeItem("s1")

        // 不能在自己页面跳转到自己页面

        if(this.$route.path!="/")

        {

          this.$router.push("/")

        }

      }

    }

  }

</script>

4.现在是登录之后跳转的页面，我们保存的token就起作用了将传递过来的路由，根据路由进行跳转指定的页面

<script>
export default {
    methods:{
        f1(){
            // 实际开发时候需要正则 ajax请求 如果登录成功保存token
            setTimeout(()=>{
                //  保存token
                localStorage.setItem("s1","登陆成功")
                // 取出传递过来的路由 根据路由进行跳转指定的页面
                var path = this.$route.query.toPath 
                if(path){
                    this.$router.push(path)
                }else{
                    this.$router.push("/")
                }
            },2000)
        }
    }
}
</script>

二、

路由嵌套

1.路由嵌套其实就是在路由配置的对象中添加children简单来说就是在父路由里面添加一个字路由，注意name需要写成父路由，然后就可以进行导入子路由了代码如下

       //父路由
     {
        path:"shanghai",
        name:"shanghai",
        component:()=> import("../views/ShangHai.vue"),
         //  通过children添加 子路由 
        children:[
          {
            path:'news',
            name:"shanghainews",
            component:()=>import("../views/News.vue")
          }
        
        ]
        
      },

2.最后一步就简单了在父路由添加<router-view></router-view>就行了

总结

1 路由拦截: 当调到目标路由之前，可以再跳转其他的路由界面 beforeEach()函数通过获取路由的元数据信息，根据元数据信息判断哪些页面是否需要进行登录判断，再判断有没有登录过，使用next函数进行跳转

2 嵌套路由 children，注意的地方设置子路由默认路由时候，可以父级路由name属性注释掉