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
            }