vue中的路由

目录

一、路由基础

? 路由机制

? 1.声明路由对象数组

? 2.创建路由器实例对象?

? 3.将路由器实例注册vue根实例

? 4.通过router-link标签访问组件

? ?5.路由导航守卫

二、动态路由匹配

?响应路由参数的变化/监听路由url地址栏参数变化？?

---

一、路由基础

? 路由机制

? 通过路由加载组件的方式，主要处理单页面应用程序。

? 1.声明路由对象数组

    // 声明路由对象数组 对象存放一个组件路由信息 通过路由映射组件
    const routes = [
      {
        path: '/',
        // 重定向
        // redirect: { name: 'MyA' }
        // redirect:'/myB'
      },
      {
        // 路由路径
        path: '/myA',
        // 路由映射组件
        component: myA,
        // 给路由设置名称
        name: 'MyA',
        // 给路由设置别名
        alias: '/aa'
      },
      {
        path: '/myB',
        component: myB,
        // 路由独享守卫 进入该路由时候触发 
        // beforeEnter(to, from, next){
        //   console.log(to,from);
        //   if(from.path!='/myA'){
        //     next(false)
        //   }else{
        //     next()
        //   }
        // }
      },
      {
        path: '/user/:id/:username',
        component: myUser
      }
    ];

? 2.创建路由器实例对象?

? const router = new VueRouter({
? ? routes:routes,
? ? 路由模式
? ? mode:''
? });

    // 创建路由器对象 将路由对象数组挂载到路由器对象中
    const router = new VueRouter({
      routes,
      // 路由模式
      mode: 'hash'
    });

? 3.将路由器实例注册vue根实例

? new Vue({
? ? router
? })

? 4.通过router-link标签访问组件

? <router-link to='/myA'>A组件</router-link>
? 路由出口匹配
? <router-view></router-view>

    <!-- 通过路由方式加载组件 router-link -->
    <router-link to="/myA">去A组件</router-link> |
    <router-link to="/myB">去B组件</router-link> |
    <router-link to="/aa">去A组件</router-link>
    <router-link to="/user/1/terry">用户组件</router-link>
    <!-- router-link本质创建a标签 -->
    <!-- <a href="#/myA">去A组件</a> -->
    <!-- 通过router-view匹配路由出口 -->
    <router-view></router-view>

? ?5.路由导航守卫

? ? ? beforeRouteEnter（）路由改变进入组件的时候触发---进入该路由对应的组件

? ? ? beforeRouteUpdate（）该组件被复用时候触发---更新该路由对应的组件

? ? ? beforeRouteLeave（）离开路由对应组件时候触发--离开该路由对应的组件

      // 路由改变进入组件的时候触发---进入该路由对应的组件
      beforeRouteEnter(to, from, next) {
        console.log(this, to, from, next, 'beforeRouteEnter', 'this指向window全局对象');
        next();
      },
      // 路由改变 该组件被复用时候触发---更新该路由对应的组件
      beforeRouteUpdate(to, from, next) {
        console.log(this, to, from, next, 'beforeRouteUpdate');
        next();
      },
      // 路由改变 离开路由对应组件时候触发--离开该路由对应的组件
      beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        console.log(this,to,from,'beforeRouteLeave')
        next();
      }

二、动态路由匹配

????????不同用户加载同一个组件,通过动态路径参数实现动态路由匹配。

?响应路由参数的变化/监听路由url地址栏参数变化？?

????????1.watch 监听路由对象，to即将进入的路由有params对象可以获取到最新的路由参数

????????2.beforeRouteUpdate 使用组件内的导航守卫beforeRouteUpdate监听到路由参数变化，即将进入路由to对象中params属性中可以获取到最新的参数

????????注意：使用created钩子获取路由对象参数只能获取到最初进入组件内路由的参数

? <user>用户组件--{{id}}--{{username}}</user>

            {
                // 动态路径参数
                path: '/myUser/:id/:username',
                component: myUser
            }