Vue-router路由+导航守卫+mata

        一、路由

• 路由就是路径和组件的映射关系。
  在一个页面里, 切换业务场景
  单页面 SPA(single page web application) 应用
  整个应用只有一个完整的页面
  点击页面中的导航链接不会刷新页面 ，只会做页面的局部更新
  数据需要通过ajax请求获取

     二、路由的基本使用 

• <router-link>   to='/user'  切换路由地址
  切换路由
  <router-view>
  存放路由

  在项目内src文件夹下的router文件夹配置

  

   在App.vue内存放路由

  

   （在别的页面跳转可直接用 <router-link to="/地址">）

  三、编程式路由跳转 $router 

• 前进   $router.forward()   $router.go(1)
  后退   go(-1)    back()
  切换路由    push("/about")
  替换路由    replace("/about")

     五、路由信息$route

路由参数
params
查询
query
地址
path
全地址
fullPath
名称
name
哈希值
hash

    六、路由守卫

        全局守卫 - 前置

 

全局 -后置

router.afterEach((to,from) =>{
    console.log(to,from)
}

独享路由守卫

     {
       //这里不用加斜
       name:'xinwen',
       path:'news',
       component:News,
       meta:{isAuth:true},
       // 独享路由守卫
       beforeEnter:(to,from,next)=>{
           if(to.meta.isAuth){
               if(localStorage.getItem('school')=== 'aiguigu'){
                  next()
              }else{
                 alert("请登录")
              }
               
          }
       }

组件内

// 组件路由
    // 通过路由规则,进入该组件时被调用
    beforeRouteEnter(to,from,next){
        console.log('我进来了',to)
    },
     // 通过路由规则,离开该组件时被调用
    beforeRouteLeave(to,from,next){
 
    }

路由元信息

{
path:path,name,component,
meta:{noFooter:true}
}


$rouye.meta.noFooter 范围

路由查询参数

传递
next("/login?redirect=/cart"）

获取
var redirecr = this.$route.query.redirect||"/user"