[JavaScript知识库]Vue Router 深度用法

vue-router路由传参 - 海螺呜呜 - 博客园

vue $router 路由传参的3种方法详解 - 简书

vue router常见问题总结

router和route的区别

1. $route为当前router跳转对象里面可以获取name、path、query、params等

2. $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

params和query的区别

用法上

query要用path来引入，params要用name来引入，接收参数都是类似的，
分别是this.$route.query.name和this.$route.params.name。
  this.$router.push({
   path:"/detail",
   query:{
    code:10011
 }
});
 
  this.$router.push({
   name:"detail",
   params:{
    code:10011
 }
});

展示上的

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

router.replace({
        path: '/login',        
        query: {
            redirect: router.currentRoute.fullPath
        }
    });

router.replace

• 跳转登录页
• 携带当前页面路由，以在登录页面完成登录后返回当前页面

你可能不清楚的 Vue Router 深度用法（一）_weixin_33949359的博客-CSDN博客

https://segmentfault.com/a/1190000018174887??你可能不清楚的 Vue Router 深度用法（二）

Vue Router 简单易上手，能实现大部分的需求。但是，如果在项目里需要更细致的控制路由，以实现与其同步的效果，就需要挖掘其文档里没详细提及的内容。第一章为路由元信息用途挖掘。

路由元信息用途

（1）验证用户身份

大部分项目，除了登录页、重置密码页、用户协议页以外，页面都需要验证用户身份进行访问。使用 Vue Router 可以配合后端进行双重验证。

（登录）验证身份方法：

1、给需要验证的路由对象添加 meta 字段，里面自定义一个代表验证的字段：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          meta: { 
              requiresAuth: true // 添加该字段，表示进入这个路由是需要登录的
          }
        }
      ]
    }
  ]
})

2、在全局导航钩子里验证 requiresAuth 字段：

注意事项：

• 使用 beforeEach 在路由变化前验证。验证原理是在跳转前，访问目标路由对象的 requiresAuth 字段判断是否需要验证用户身份，如为是，检测是否有保存用户信息（即用户登录成功后前端保存的信息，例如 token）
• 每个路由都有一个 $route.matched 数组，包含当前路由的父级路由对象和当前路由对象，在组件中可以通过 this.$route.matched 访问
• beforeEach 的 to 参数即目标路由对象 $route，to.matched 即是它的路由数组
• 因此，使用 some 方法，只要路由数组里的任意路由对象需要验证身份，即进行验证
• 验证成功跳转正确页面；失败则跳到登录页，将目标地址附在 url 的 query 里，登录成功就跳转到目标地址

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.loggedIn()) {  // 没登录
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()  // 确保一定要调用 next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

3、拦截 http 请求，验证用户身份

为了防止本地保存的 token 过期，需要拦截 http 请求，为每次请求头加上 token ，然后拦截 http 响应，根据响应内容判断是否需要跳回登录页面重新登录。使用 axios 的方法如下：

// http request 拦截器
axios.interceptors.request.use(
    config => {
        if (auth.loggedIn()) { // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${auth.loggedIn()}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });
 
// http response 拦截器
 
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // Unauthorized
                    // 返回 401 清除token信息并跳转到登录页面
                    auth.clear();
                    router.replace({
                        path: 'login',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    })
            }
        }
        return Promise.reject(error.response.data) // 返回接口返回的错误信息
    });

（2）定义用户权限能访问的页面

前端查看权限，也是配合后端进行某些页面的隐藏显示功能。一般应用于综合的办公系统，由 IT 部分配账号，不同部门的人只能看到自己负责的内容，例如行政部不会看到财务数据页面。

实现方法：

1. 与后端商定每个用户角色对应的 level 级别，以数值表示
2. 前端路由每个页面的 meta 对象添加 level 字段，值为数组，里面是有权限访问页面的 level 数值
3. 登录成功，后台返回用户 token 的同时，返回其所属的 level 字段
4. 组件代码比较目标页面的 level 与用户 level，只显示包含在目标 level 数组里的页面
5. 全局导航钩子 beforeEach 里比较目标页面的 level 与用户 level，包含在目标 level 数组里则正确跳转，反之取消跳转并提示权限不足

上面第5步是为了防止用户直接在浏览器输入目标地址

（3）其他内容控制

可以控制显示路由固定的搭配，例如某个路由地址的 title 是固定的字符串、固定的欢迎语、固定的 favicon 等。在组件里通过 this.$route.meta.xxx 访问。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          meta: { 
              title: '标题',
              message: '欢迎您',
              requiresAuth: true // 添加该字段，表示进入这个路由是需要登录的
          }
        }
      ]
    }
  ]
})

第二章的内容在此? https://segmentfault.com/a/11...

此为 Vue Router 深度用法的第二篇，主要讲述动态路由匹配用法。第一篇的链接在此：? https://segmentfault.com/a/11...

动态路由匹配是用于把某种模式匹配到的所有路由，全都映射到同个组件。通过给路由路径一个变量，即变成动态路由，把变化的内容赋值给变量即可。

例如文章详情页是一个组件，只有一个路由，从文章列表页点进来，变化的只是文章 id 而已。将其赋予给设定的变量，然后通过在组件里 watch $route 或者使用 beforeRouteUpdate 导航守卫监测路由变化，传递新的文章 id 获取文章详情即可。在组件里，可以通过
this.$route.params.xx
获取当前文章 id。

一个路由地址可以设置多个变量，适合有分叉情况的内容。例如 path: '/params/:foo/:bar'

从文章列表页点进来即传递路由变量，有三种方法：

（1）<router-link to="/params/list/1">跳转到 /params/list/1</router-link>
（2）this.$router.push({ name: 'articles', params: { foo: 'list', bar: 1 } })
（3）this.$router.push({ path: '/params/list/1' }) // path 不能与 params 同时使用

高级匹配模式

这里主要研究的是动态路由匹配的高级匹配模式，以达到合并差异不大的路由、减少路由数量的目的。

高级匹配即结合简单的正则匹配方法，给予路由更多的限制和操作空间。

1、可选路由参数

路由参数可选，添加与否都对应同一个组件。可以在组件里使用 v-if / v-show 结合 $route.params.xx 展现不同的内容

// a param can be made optional by adding "?"
{ path: '/optional-params/:foo?' }

// 这两个链接都对应同个组件
<li><router-link to="/optional-params">/optional-params</router-link></li>
<li><router-link to="/optional-params/foo">/optional-params/foo</router-link></li>

2、精确匹配参数

只有参数通过正则匹配，完全符合格式，才能会跳转。例如只有参数是数字/手机号才允许跳转。适用于对第三方不规范格式的数据进行筛选。

// a param can be followed by a regex pattern in parens
// this route will only be matched if :id is all numbers
{ path: '/params-with-regex/:id(\\d+)' }
// 只匹配数字
<li><router-link to="/params-with-regex/123">/params-with-regex/123</router-link></li>

// 只匹配手机号
{ path: '/params-with-regex/:id(^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$)' }
<li><router-link to="/params-with-regex/13800138000">/params-with-regex/13800138000</router-link></li>

3、匹配任意参数

不对参数格式、数量进行限制，任意参数都可。

// asterisk can match anything
{ path: '/asterisk/*' }

// 这两个都是同一组件
<li><router-link to="/asterisk/foo">/asterisk/foo</router-link></li>
<li><router-link to="/asterisk/foo/bar">/asterisk/foo/bar</router-link></li>

4、部分可选参数

结合可选路由参数与多路由参数，其中一部分参数可选。适用于分叉情况下不确定参数数量的情况。

// make part of the path optional by wrapping with parens and add "?"
{ path: '/optional-group/(foo/)?bar' }

// 这两个都是同一组件
<li><router-link to="/optional-group/bar">/optional-group/bar</router-link></li>
<li><router-link to="/optional-group/foo/bar">/optional-group/foo/bar</router-link></li>