vue router

前面我们知道怎么创建一个vue项目,今天我们就来看一下vue中的vue router。
它是 Vue.js 官方的路由管理器 并且与 Vue.js 的核心深度集成,可以让构建单页面应用变得易如反掌。包含的功能有:

1 1. 嵌套的路由/视图表 2 2. 模块化的、基于组件的路由配置 3 3. 路由参数、查询、通配符 4 4. 基于 Vue.js 过渡系统的视图过渡效果 5 5. 细粒度的导航控制 6 6. 带有自动激活的 CSS class 的链接 7 7. HTML5 历史模式或 hash 模式,在 IE9 中自动降级 8 8. 自定义的滚动条行为 9 10

我们拿vue-cli生成的项目来说,其中vue-router的简单配置如下:

1import Vue from 'vue' 2import Router from 'vue-router' 3// 导入需要配置路由的组件 4import HomePage from '@/components/HomePage' 5// 注册使用vue router 6Vue.use(Router) 7 8export default new Router({ 9 routes: [ 10 { 11 path: '/', //当前匹配的路径 12 name: 'HomePage', // 映射的组件名称 13 component: HomePage //映射的组件 14 } 15 ] 16}) 17 18

这里我给代码进行了简单的说明。

顺便说一下router-view:

1<router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。 2 3其他属性 (非 router-view 使用的属性) 都直接传给渲染的组件, 很多时候,每个路由的数据都是包含在路由参数中。 4 5因为它也是个组件,所以可以配合 <transition><keep-alive> 使用。如果两个结合一起用,要确保在内层使用 <keep-alive>6 7<transition> 8 <keep-alive> 9 <router-view></router-view> 10 </keep-alive> 11</transition> 12 13

我们来看下路由的基本使用,那么在一个vue项目里面该怎么使用路由跳转呢?

在vue中,vue-router有两种跳转方式:

使用内置的router-link组件
在这里插入图片描述

然后我们运行一下程序:
在这里插入图片描述
我们可以看到其实router-link最终会被渲染为a标签,这里我们一般只需要关注props属性to就好了,to对应的是跳转的路径,可以进行动态绑定

使用router的实例方法
router的实例方法我们最常用到的有以下几个:

1 router.push 2 router.replace 3 router.go 4 router.back 5 router.forward 6 7
1函数签名: 2 router.push(location, onComplete?, onAbort?) 3 router.replace(location, onComplete?, onAbort?) 4 router.go(n) 5 router.back() 6 router.forward() 7 8

具体的大家可查阅官方文档。

这里我们演示一下使用push方法进行路由跳转的代码:

HomePage.vue:

1<template> 2 <div> 3 <div @click="goto" style="color: skyblue;cursor: pointer;">点击我可以跳转哦</div> 4 <button @click="forward" style="margin-top: 20px;">forward</button> 5 </div> 6</template> 7 8<script> 9export default { 10 name: 'HomePage', 11 data() { 12 return {}; 13 }, 14 methods: { 15 goto() { 16 this.$router.push('/about'); 17 }, 18 forward() { 19 this.$router.forward(); 20 } 21 } 22}; 23</script> 24 25 26<style scoped> 27</style> 28 29

About.vue:

1<template> 2 <div> 3 <p>本课程是关于vue-router的基本知识,所有知识点大家都可以在官方文档中找到,提前祝大家即将来到的新年快乐!</p> 4 <button @click="back" style="margin-top: 20px;">back</button> 5 <button @click="forward" style="margin-top: 20px;">forward</button> 6 </div> 7</template> 8 9<script> 10export default { 11 name: 'About', 12 methods: { 13 back() { 14 this.$router.back(); 15 }, 16 forward() { 17 this.$router.forward(); 18 } 19 } 20}; 21</script> 22 23<style> 24</style> 25 26 27

运行效果:
在这里插入图片描述

在这里插入图片描述

接下来我们在看一个场景,我们的网站有很多的用户,当点击这个用户的时候,我们需要一个页面去展示这个用户的个人信息。我们会单独抽取一个组件叫Users,对于所有 ID 各不相同的用户,都要使用这个组件来渲染,此时我们就需要通过路由进行传参来达到我们的目的。

router-link传递参数的方式:

1<!-- 字符串 --> 2<router-link to="home">Home</router-link> 3 4<!-- 使用 v-bind 的 JS 表达式 --> 5<router-link v-bind:to="'home'">Home</router-link> 6 7<!-- 不写 v-bind 也可以,就像绑定别的属性一样 --> 8<router-link :to="'home'">Home</router-link> 9 10<!-- 同上 --> 11<router-link :to="{ path: 'home' }">Home</router-link> 12 13<!-- 命名的路由 --> 14<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link> 15 16<!-- 带查询参数,下面的结果为 /register?plan=private --> 17<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link> 18 19

在上面的基础上创建Users组件,这里模拟一些用户数据。

1<template> 2 <div style="border: 1px dashed skyblue;"> 3 <div> 4 <span>{{activeUser.username}}</span> 5 <span>{{activeUser.visitDate}}</span> 6 </div> 7 </div> 8</template> 9 10<script> 11export default { 12 name: 'Users', 13 data() { 14 return { 15 userList: [ 16 { 17 id: 0, 18 username: 'name0', 19 visitDate: Date.now() 20 }, 21 { 22 id: 1, 23 username: 'name1', 24 visitDate: Date.now() 25 }, 26 { 27 id: 2, 28 username: 'name2', 29 visitDate: Date.now() 30 }, 31 { 32 id: 3, 33 username: 'name3', 34 visitDate: Date.now() 35 } 36 ], 37 activeUser: {} 38 }; 39 }, 40 mounted() { 41 console.log(this.$route); 42 this.activeUser = this.userList.filter(user => { 43 console.log(this.$route.params.id, user.id); 44 if (this.$route.params.id == user.id) { 45 return user; 46 } 47 })[0]; 48 console.log(this.activeUser); 49 } 50}; 51</script> 52 53<style> 54</style> 55 56 57

然后配置路由:

1{ 2 path: '/users/:id', 3 name: 'Users', 4 component: Users 5 }, 6 7

其中路由配置的是/users/:id,:id表示我们的路由会传递一个参数,名称为id。

现在我们修改HomePage页面:

1<template> 2 <div> 3 <p> 4 <span>用户id:</span> 5 <input v-model="id" /> 6 </p> 7 <router-link :to="'/users/'+id">查看用户id为{{id}}的个人信息</router-link> 8 </div> 9</template> 10 11<script> 12export default { 13 name: 'HomePage', 14 data() { 15 return { 16 id: 0 17 }; 18 }, 19 methods: { 20 } 21}; 22</script> 23 24 25<style scoped> 26</style> 27 28 29

运行:
在这里插入图片描述

在这里插入图片描述

这里大家需要注意:
一个路由对象 (route object) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息,还有 URL 匹配到的路由记录 (route records)。

路由对象是可变 (immutable) 的,每次成功的导航后都会产生一个新的对象。

路由对象出现在多个地方:

1在组件内,即 this.$route 2$route 观察者回调内 3router.match(location) 的返回值 4 5

路由对象的属性:

1$route.path 2 3类型: string 4 5字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"6 7$route.params 8 9类型: Object 10一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。 11 12$route.query 13 14类型: Object 15 16一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。 17 18$route.hash 19 20类型: string 21 22当前路由的 hash(#) ,如果没有 hash 值,则为空字符串。 23 24$route.fullPath 25 26类型: string 27 28完成解析后的 URL,包含查询参数和 hash 的完整路径。 29 30$route.matched 31 32类型: Array<RouteRecord> 33$route.name 34 35当前路由的名称,如果有的话。(查看命名路由) 36 37$route.redirectedFrom 38 39如果存在重定向,即为重定向来源的路由的名字。 40 41
1特别提醒: 2$route为当前router跳转对象里面可以获取name、path、query、params等 3 4$router为VueRouter实例,想要导航到不同URL,则使用$router.push等方法 5 6

也就是说如果我们期望从路由中获取一些参数等等情况,那么记得你要使用的是:this.$route而不是前面演示路由跳转时使用的this.$router

代码交流 2021