vue路由—核心概念

一、路由构建选项

• mode：
  路由模式
• base：
  应用的基路径，默认值“/”。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。
  重点：base上配置的路径，路由的每一次跳转都会自动加上这个前缀路径的。
• routes：路由表的配置
  • path：
    注意：子路由path路径带 ‘/‘ 与不带的区别 是 带 '/' 表示从根部开始的路由；不带是'/'是需要拼接后的路由。https://blog.csdn.net/cxy_pan0913/article/details/122990074
  • component：
  • name：
  • meta：元数据。
    简单理解，就是给对应的路由添加一些信息（状态），对应这个url地址的页面，可以是获取到这些信息的（状态）。

    {
      path: '/msite',
      component: msite,
      meta: { keepAlive: true },
    }
    
    <router-view v-if="$route.meta.keepAlive"></router-view> <!-- 页面中获取路由 meta中keepAlive字段的信息 -->

  • children
  • beforeEnter
  • redirect
  • components：命名视图组件，多组件时才会使用。一般都是使用 component，即默认命名。
  • props
  • alias
  • caseSensitive： 匹配规则是否大小写敏感（默认值：false）
  • pathToRegexpOptions：编写正则选项
• scrollBehavior：跳转后的 滚动行为

二、rooter-link的属性:  https://v3.router.vuejs.org/zh/api/#router-link

• to 属性：
• tag 属性：
• replace 属性：
• active-class 属性： 设置链接激活时使用的 CSS 类名。需要设置激活时样式时，就是对着类名设置。
  • 默认值: "router-link-active" 【不去主动设置时，默认是这个类名】
  • 默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

    new VueRouter（{
        mode: 'history'
        linkActiveClass: 'active',  // 链接激活时，默认值变成active
        rootes：[
            {    }
        ]
    }）

三、router-view的属性：https://router.vuejs.org/zh/guide/#router-view

　　  router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

1. name属性：使用就是实现 命名视图
   每个路由对应的组件是可以多个的。router-view是根据name属性，渲染对应 组件的。name属性没有显示写明就是使用的 默认 “default”值（路由配置中组件没有显示写名字，就是默认的“default”名。来自对应起来的）。
   
   
2. route属性：【好像没什么用】

 

四、路由传参：https://www.jianshu.com/p/d276dcde6656

　　第一种：动态路由，（在路由中配置，页面刷新数据不会丢失）  

         path: '/particulars/:id',

        this.$router.push({
          path: `/particulars/${id}`,
        })

　　　　获取参数

       this.$route.params.id

　　第二种：通过params来传递参数（不需要路由配置，刷新页面数据会丢失）

　　　　　　注意：这种路由跳转 不是通过 path 跳转的，而是通过name跳转的。【这种参数可以猜到，内部应该是把name对应的字段（所以不适合用path字段）挂载route属性下，这样属性中就可以存放相应的参数。】

       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })

　　　　获取参数

        this.$route.params.id

　　第三种：通过query来传递参数（刷新页面数据还在，这种方法在url上会显示?id=**）

        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })

　　　　获取参数

       this.$route.query.id

五、导航守卫【即路由守卫】：https://www.cnblogs.com/elfpower/p/9230528.html 或 官方文档

• 全局的 路由守卫分：全局前置守卫【常用这个】、全局解析守卫、全局后置钩子

  // 全局路由守卫
  router.beforeEach((to, from, next) => {
    console.log('守卫')
    next() // 必须使用 next ,执行效果依赖 next 方法的调用参数
  })

  //  全局解析守卫【和 beforeEach的区别，主要就是时间的不同。路由组件解析后调用】
  router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

  // 全局后置钩子【和 守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身】
  router.afterEach((to, from) => {
    // ...
  })

• 路由独享的守卫：beforeEnter【常用】。

  const router = new VueRouter({
    routes: [
      {
        path: '/foo',
        component: Foo,
        beforeEnter: (to, from, next) => {
          // ...
        }
      }
    ]
  })

• 组件内的路由守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

  const Foo = {
    template: `...`,
    beforeRouteEnter(to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建
    },
    beforeRouteUpdate(to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave(to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    }
  }

  重点注意：beforeRouteEnter虽然不能访问this，但是可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
    })
  }

  说明：beforeRouteUpdate 用于 当前路由 跳转到 当前路由（自己的路由，只是更新参数），只是参数不一样时使用；而 beforeRouteLeave 用于离开当前路由使用。

• 导航守卫实现的功能：

• • 导航守卫实现页面title设置

    router.beforeEach((to, from, next) => {
      document.title = to.meta.title
      next()
    })

    注意：如果当前路由是有子路由的话，to.meta是子路由的配置的meta。如果要回去上一级路由的meta值。需要使用 从 matched 中获取，matched 对象下 保存了每一级路由的 route对象。

    router.beforeEach((to, from, next) => {
      document.title = to.matched[0].meta.title
      next()
    })

六、动态路由 

• 概念：路由配置由后端接口给。
• 难点：路由是后端给的，前端路由没有对页面组件的依赖。webpack如何把组件打包进来。https://webpack.docschina.org/guides/dependency-management/ (webpack文档)
  https://blog.csdn.net/weixin_30767365/article/details/119510733 或 https://segmentfault.com/q/1010000009983236/ 或 https://juejin.cn/post/6872344841293037582

  const loadViewsd = (view) => {
    return () => import(`@/views/${view}.vue`)  // 这样写的化，webpack就会把views下面所有的vue文件打包进去。
  }

  个人总结：webpack中动态导入模块，如果是一个变量。webpack就会把可匹配的目录下的所有文件进行打包。 

• 实现API：https://v3.router.vuejs.org/zh/api/#router-addroutes
  • router.addRoutes（已废弃）：不过 目前还是有写框架还在用的，如 jeecg-boot
  • router.addRoute：
    添加一条新路由规则。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。

 

---

 路由中 非预期的现象

1、当前页面跳转到自己的页面（参数改变），页面不会重新进行生命周期执行程序。https://zhuanlan.zhihu.com/p/141758089
　【Vue中跳转相同的路由，不会重新加载程序】

• 解决方法1：beforeRouteUpdate生命周期（不推荐）

    beforeRouteUpdate(to, from, next) {
     
    },

  有一个问题要注意：就是 beforeRouteUpdate 里面的代码执行了，但是  this.$route.query 里面的参数还没有改变过来。（即，beforeRouteUpdate 比 this.$route.query 的改变先执行了）
  用个setTimeout 定时器，就可以解决。所以 在 beforeRouteUpdate 最好使用 to这个对象 获取 query 参数，而不要使用 this.$route。
  但是实际开发中，很多地方都会使用 this.$route.query里面的值。所以重新执行初始化重新时，要让它在 beforeRouteUpdate之后，即用 setTimeout 延时执行初始化的代码。

    beforeRouteUpdate(to, from, next) {
       console.log(JSON.stringify(this.$route.query))
       setTimeout(() => {
          console.log(JSON.stringify(this.$route.query))
          // 在 beforeRouteUpdate执行完毕后执行 初始化程序。这时里面的 this.$route.query 就是 最新的 值了
       }，0)
       next()
    },   

• 解决方法2：给router-view绑定相应的key值，这种方式会重新加载路由页面。因为key值不同，router-view认为是不同路由，就会重新加载。（推荐）

  <router-view :key="$route.fullPath"></router-view>

• 解决方法3：监听路由的变化（使用组件内的路由守卫）

  使用这种方法，碰到一个问题：
         当前页面跳转到自己的页面（参数改变）、本地开发环境好好的。打包后运行的代码，跳转相同的url（参数不一样），根本没有反应，url都不会变化。根本无法监听到路由的变化。（不是一定会出现，目前尚未找到原因）

  watch: { 
      $route (to, from) { 
           //这样就可以获取到变化的参数了，然后执行参数变化后相应的逻辑就行了
           console.log(JSON.stringify(this.$route.query))// 这里this.$route.query获取到的是最新的值  
      } 
  }

　　总结：这里有一个程序执行顺序的问题，beforeRouteUpdate > this.$route 变化 > watch监听 $route 变化。【$route变化了，才会触发watch里面的函数，后面这个好理解】

• 解决方法4：就是避免不要出现自己跳转自己的情况，页面内容可以是一样的（即页面组件都是同一个）。但是路由url地址设置不同的就可以了。
  实现上，就是多配一个路由（其它什么都不需要改的），其它什么都不用改。

2、路由中 多级路由，使用 子路由 和 二级路由 是有区别的：https://blog.csdn.net/studentenglish/article/details/96647507

　 在vue-router中，多级路由有如下两种写法：

• 直接多级路由

  {
        path: '/home/comp',
        name: 'comp',
        component: () => import('../common/comp.vue'),
        meta: {
          name: 'comp'
        }
  }

  多级路由的写法，comp的内容会独立于home显示在新页面中。即当前的路由，不会受到上一级路由的影响。

• 以子路由的形式

  {
       path: '/home',
       name: 'home',
       component: home,
       meta: {
         name: 'napier'
       },
       children: [
         {
           path: 'comp',
           name: 'comp',
           component: () => import('../common/comp.vue'),
           meta: {
             name: 'comp'
           }
         }
       ]
  } 

 3、后台管理项目，当前页面，点击当前页面的菜单时，页面无法提供 可 执行的API。

　　目前没有想到好的办法解决