vue-总结07.2-高级-全家桶-router-路由传参-路由接参-编程式导航-导航守卫

路由传参

路由传参的方式有两种

1. to属性和单项数据绑定来完成
2. 编程式导航

to属性和单项数据绑定来完成路由传参

1. 在路由的路由配置表里给需要路由传参的组件加上name属性
2. path后面加上 /：key 这里的key是 router-linke里to属性里params里的key
3. 在to属性里加上query 这里是携带参数
4. 图示 说params可以不加 最好加上， 以下 路由model为 history

 <router-link
              class="nav-link"
              keep-alive
              active-class="active"
              :to="{
              name:'home',
              query:{
                cid:'13'
              }
            }"
            >首页</router-link>

路由接参 可以在跳转后的页面的 this.$router.query.cid访问传递来的参数

来实现路由的动态组件
url发生改变，组件不变，但是组件的内容改变，共用了同一个组件

编程式导航

通过给标签添加事件处理函数，在函数里使用 this.$router.push或replace来实现跳转页面，两个方法有所区别 replace 不会将我们的跳转放入历史记录。

 methods: {
    goAboutUs() {
       this.$router.push('/home/h_xx')
       this.$router.push({
         name:'h_xx',
         params:{
           id:111
         },
         query:{
           cid:222
         }
        })

      this.$router.replace('/aboutus')
      this.$router.replace({
        name:'h_xx',
        params:{},
        query:{}
      })

	this.$router.go(-1)  可以直接返回上一层  可以用来制作 返回按钮
    }
  }
};

导航守卫

• 入职后处理路由拦截，也就是我们被卡在登录页面或是其他页面
• 想办法的到token
• 后台接口文档中找登录接口，然后自己写一个ajax发送一次请求，然后将token保存在cookie
• 拿不到就注释掉人家的导航守卫

1. 全局导航守卫

   在 router文件夹里创建  global-config.js  在main.js中引用   在global-config.js中书写导航守卫
   前置守卫   管理的是路由的进入
   
   

//书写全局导航守卫

import router from './index'

//1.全局导航守卫  - 前置守卫  - 管理路由进入



router.beforeEach((to, from, next) => {
    /* 
        to 表示目标路径 - 我想进那里
        from 表示的是当前路径 - 我现在所在的路径
        next 表示  from 到 to 的连接，它可以控制 是否允许进入
        里面什么都不屑  表示不允许
    */
    // next()   //等价于  next( true )   什么都不写  等价于next( false )

    //写一个自动跳转
    //当我们登录了之后，我们前端要讲后端给的token值存储起来，然后我们通过判断token是否存在，来进入项目
    // if (tanken) { //路由鉴权  用路由鉴定你是否有进入的权限
    //     next()
    // } else {
    //     // next(false)//如果token不不存在  就不跳转

    // }
    const token = localStorage.getItem('token')
    //如果token不存在就跳转登录页
    if (!token) {
        // next(路由路径)   //下面这样写会死循环 栈溢出

        if (to.path == '/home') {

            next('/aboutus')
        }

        next()

    }


})

//后置守卫 - 表示离开
router.afterEach((to, from) => {
    //没有next参数，那就没有拦截作用，它可以提示
    if (to.path == '/home') {
        alert('您是否要进入首页')
    }
})

2. 路由独享守卫

   在路由表里配置
   针对的是某一个路由配置
   

   

3. 组件内守卫
   1.前置守卫
   - 拦截
   - 数据预载
   
   2.更新守卫
   3.后置守卫

   export default {
   	beforeRouteLeave(to,from,next){
   	//也是拦截  可以做  填写表单的功能  如果用户在表单内填写了内容 要离开页面时可以弹框请他确认是否要离开页面   如果输入框中没有信息就让他离开
   	//this可以拿到
   	if(!this.username || !this.password || !this.enail || !this.phone){
   		if(confirm('你确定要离开吗')){
   			   next()
   			} else {
   			   next(false)
   			}
   		}
   	} 
   }