Class19 - Vue Router
作者:©Mrlin(史密斯林)
简介:学习记录,用于记录在CSDN课程中的学习内容。
课程:Vue2.x从入门到实战。Vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动.(来自官方介绍)
Vue Router
Vue Router
是Vue
官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
- 路由引入
1 | import Vue from 'vue' |
main.js中
1
2
3
4
5
6
7
8
9
10
11
12
13import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})访问路由器
1
2
3
4
5
6// this.$router
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}访问当前路由
1
2// this.$route
let name = this.$route.params.username
使用router-link
组件进行导航1
<router-link to="/hello">Go to Hello</router-link>
- 设置动态路由
动态路由,用于匹配适用于某种规则的路由。
例如:1
2
3
4
5{
path:'/User/:id',
name: 'User',
component: User
}
“路径参数”使用冒号:
来进行标记,这种规则的路由时,会自动将:
后的参数自动映射到当前路由的params中。
例如,我们可以使用this.$route.params.id
获取到参数id1
this.$route.params.id
- 嵌套路由
按照个人理解,嵌套路由,即是在当前非根层路径页面下存在子路径。
例如:1
2
3|-- /User/:id
|-- |-- /page1 (/User/110/page1)
|-- |-- /page2 (/User/110/page2)
这个目录格式得以应用需要借助 router-view
例如:顶层路由入口1
2
3<div id="app">
<router-view/>
</div>
此时的 User
组件会应用到这一层的 router-view
中
在相应的 User
组件中使用 router-view
得以实现组件嵌套1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<template>
<div>
<div>Hello {{id}}</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {};
},
computed: {
id: function() {
return this.$route.params.id;
}
}
};
</script>
<style scoped>
</style>
于此同时,要在 router
中设置 children
路径1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path:'/User/:id',
name: 'User',
component: User,
children:[
{
path: 'page1',
name: 'page1',
component: Page1
},{
path: 'page2',
name: 'page2',
component: Page2
}]
}
]
})
当然可以使用 一个空的 path
来展示默认展示页面1
2
3
4{
path: '',
component: defaultPage
}
- 编程式导航
1
2
3router.push(location, onComplete?, onAbort?)
router.replace(location, onComplete?, onAbort?)
router.go(n)
router.push()
1 | // 字符串 |
注意:如果提供了 path,params 会被忽略,上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法,你需要提供路由的 name 或手写完整的带有参数的 path:
1 | const userId = '123' |
router.replace
跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。
router.go
router.go(n)这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)。1
2
3
4
5
6
7
8
9// 在浏览器记录中前进一步,等同于 history.forward()
router.go(1)
// 后退一步记录,等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用,那就默默地失败呗
router.go(-100)
router.go(100)
全局导航守卫
1 | router.beforeEach((to, from, next) => { |
当路由跳转前,会执行该方法内代码,多用于登录和鉴权。
该方法内一定要调用
next
方法
路由独享守卫
1 | routes: [ |
在单个路由内定义,当跳转到该路由时执行的方法。