vue路由Vue-Router超详解_vuerouter

前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

Vue-Router

Vue-router做路径匹配时支持动态片段、全匹配片段以及查询参数（片段指的是URL中的一部分）

对于解析过的路由，这些信息都可以通过路由上下文对象（从现在起，我们会称其为路由对象）访问。

在使用了vue-router的应用中，路由对象会被注入每个组件中，赋值为this.$route，并且当路由切换时，路由对象会被更新

---

脚手架中添加vue-router

• 在路由定义文件中，通过Vue.use添加组件选项，并且该方法必须在new Vue() 启动应用之前完成

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router);
export default new Router({
  mode: 'history', // 去掉路由中的#号
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 在Vue.new初始化时，将可导出router对象注入到Vue根实例中

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router, // 注入router
  components: {App},
  template: '<App/>'
})
1
2
3
4
5
6
7
8
9
10
11
12

这样就可以了

路由模式

一般单页面应用是(SPA)不会请求页面而是只更新视图

vue-router提供了两种方式来实现前端路由：Hash模式和History模式,可以用mode参数来决定使用哪一种方式

export default new Router({
  mode: 'history',
  ...
})
1
2
3
4

hash

vue-router默认使用Hash模式，使用url的hash来模拟一个完整的url

此时url变化时，浏览器是不会重新加载的

Hash(即#)是url的锚点，代表的是网页中的一个位置，仅仅改变#后面部分，浏览器只会滚动对应的位置，而不会重新加载页面

#仅仅只是对浏览器进行指导，而对服务端是完全没有作用的

它不会被包括在http请求中，故也不会重新加载页面。同时hash发生变化时，url都会被浏览器记录下来，这样你就可以使用浏览器的后退了

History

如果你不喜欢hash这种#样式，可以使用history模式

这种模式利用了HTML5 History新增的pushState()和replaceState()方法

除了之前的back，forward，go方法；这两个新方法可以应用在浏览器历史记录的增加替换功能上

使用History模式，通过历史记录修改url。但它不会立即向后端发送请求

---

注意：虽然History模式可以丢掉不美观的#，也可以正常的前进后退，但是刷新f5后，此时浏览器就会访问服务器，在没有后台支持的情况下，此时就会得到一个404！

官方文档给出的描述是: 这种模式要玩好，还需要后台配置支持

---

因为我们的应用是单个客户端应用，如果后台没有正确的配置，当用户直接访问时，就会返回404

所以，要在服务端增加一个覆盖所有情况的的候选资源。如果url匹配不到任何静态资源；则应该返回同一个index.html页面

路由属性

路由对象this.$route支持属性如下

• $route.path

  字符串，等于当前路由对象的路径，会被解析为绝对路径

/aaa/bbb
1

• $route.params

  包含路由中的动态片段和全匹配片段的键值对，配合动态路由使用

• $route.query

  获取连接中查询参数的键值对

/foo?user=1
// 可以获取到
$route.query.user == 1
1
2
3

• $route.router

  路由规则所属的路由器以及其所属的组件

• $route.matched

  数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象

• $route.name

  当前路径的名字

自定义属性

路由中设置自定义参数

router.map({
  '/a': {
    component: { ... },
    auth: true // 这里 auth 是一个自定义字段
  }
})
1
2
3
4
5
6

当 /a 被匹配时，$route.auth 的值将会是 true

我们可以利用这个特性在全局的钩子函数中进行身份验证

router.beforeEach(function (transition) {
  if (transition.to.auth) {
    // 对用户身份进行验证...
  }
})
1
2
3
4
5

动态路由

:号通配符

路由中的动态片段使用以冒号开头的路径片段定义，类比django中的路由传参

path('<int:name>/',views.xx),
1

path: '/user/:username',
component: {
    template: '<p>用户名是{{$route.params.username}}</p>'
}
1
2
3
4

一条路径中可以包含多个动态片段，每个片段都会被解析成 $route.params 的一个键值对

解析模式

全匹配路由

*号通配符

动态片段只能匹配路径中的一个部分，而全匹配片段则基本类似于它的贪心版

例如 /foo/*bar 会匹配任何以 /foo/ 开头的路径

当使用一个通配符时，$route.params内会自动添加一个名为pathMatch的参数，其中包含了在连接中通过通配符所匹配到的部分

{
    path: '/user/*/cc',
    name: 'User',
    component: User,
},
1
2
3
4
5

访问的URL如下

http://127.0.0.1:8080/user/1231/aaa/cc
1

那么此时*通配符拿到的部分为

{ "pathMatch": "1231/aaa" }
1

命名路由

类似django的路由命名，vue路由映射中也可以为某一个路由通过name属性设置命名

{
    path: '/user/:userid',
    name: 'User',
    component: User,
},
1
2
3
4
5

在使用v-link标签进行路由跳转时，就可以更加方便啦

<router-link :to="{name: 'User', params: {userid: 'zhangsan' }}">user</router-link>
1

也可以在js代码中使用router.go切换到该路径下

router.go({ name: 'user', params: { userId: 123 }})
1

路由跳转

v-link 是一个用来让用户在vue-router应用的不同路径间跳转的指令

该指令接受一个JavaScript表达式，并会在用户点击元素时用该表达式的值去调用 router.go

<!-- 字面量路径 -->
<a v-link="'home'">Home</a>

<router-link :to="{name: 'home'}">Home</router-link>

<!-- 效果同上 -->
<a v-link="{ path: 'home' }">Home</a>

<!-- 具名路径 -->
<a v-link="{ name: 'user', params: { userId: 123 }}">User</a>
1
2
3
4
5
6
7
8
9
10

一般来说，都应该使用 v-link 而不是 href 来处理浏览时的跳转，这是因为

• 它在HTML5 history模式和hash模式下的工作方式相同，所以如果你决定改变模式，或者IE9浏览器退化为hash模式时，都不需要做任何改变
• 在HTML5 history模式下，v-link 会监听点击事件，防止浏览器尝试重新加载页面
• 在HTML5 history模式下使用 root 选项时，不需要在 v-link 的URL中包含root路径

其他选项

• replace

  一个带有 replace: true 的链接被点击时将会触发 router.replace() 而不是 router.go()。由此产生的跳转不会留下历史记录

<router-link :to="{name: 'User', params: {userid: 'zhangsan' }, replace: true }">replace</router-link>
1

• append

  带有 append: true 选项的相对路径链接会确保该相对路径始终添加到当前路径之后

  举例来说，从 /a 跳转到相对路径 b 时，如果没有 append: true 我们会跳转到 /b，但有 append: true 则会跳转到 /a/b

<router-link :to="{name: 'User', append: true }">append</router-link>
1