一、什么是Vue Router
Vue Router的作用就是根据不同的路径映射到不同的视图。
Vue Router(路由)就是SPA(单页应用)的路径管理器。SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面
Vue Router 是 Vue.js 官方的路由管理器,可以用来帮我们解决路由的问题。Vue Router 的能力十分强大,它支持 hash
、history
、abstract
3 种路由方式,提供了
和
2 种组件,还提供了简单的路由配置和一系列好用的 API。
二、Vue Router基本使用
1. 导入Vue Router
2. 定义路由规则
// 定义切换的规则(定义路由规则)
const routes = [
// 数组中的每一个对象就是一条规则
{path: "/one", component: one},
{path: "/two", component: two}
];
重定向路由
{ path: '被重定向值', redirect: '重定向之后的值' }
例如: 我们先一进来就显示one组件
这里的/
是根路径
// 重定向路由
{path: "/", redirect: '/one'}
3. 根据路由规则创建路由对象
const router = new VueRouter({
routes: routes
// 简写
routes
});
4. 将路径对象挂载到Vue实例中
//定义组件
const one = {
template: '#one'
};
const two = {
template: '#two'
};
new Vue({
el: '#app',
// 将创建好的路由对象绑定到Vue实例上
router: router,
components: {
'one': one,
'two': two
}
});
5. 修改URL哈希值
切换到第一个页面
切换到第二个页面
通过a标签确实能设置URL的hash,但是这种方式并不专业
在Vue Router中提供了一个专门用于设置hash的标签 router-link
默认情况下Vue会将router-link
渲染成a标签, 但是我们可以通过tag来指定到底渲染成什么
切换到第一个页面
切换到第二个页面
给router-link
设置选中样式
默认情况下我们可以通过重写router-link-active
类名来实现设置选中样式
但是我们也可以通过linkActiveClass
来指定选中样式
const router = new VueRouter({
routes: routes,
linkActiveClass: 'my-active'
});
6. 通过
渲染匹配的组件
三、Vue Router传递参数
将Vue Route
r挂载到了Vue实例对象上, 我们就可以通过vue.$route
拿到路由对象
拿到了路由对象, 就可以通过路由对象拿到传递的参数。
1. 通过URL参数传参
在指定Hash的时候, 通过?key=value&key=value
的方式传递
切换到第一个页面
在传递的组件的生命周期方法中通过 this.$route.query
的方式来获取
const one = {
template: '#one',
created: function () {
console.log(this.$route); // 路由对象
console.log(this.$route.query.name); // zs
console.log(this.$route.query.age); // 20
}
};
2. 通过占位符传参
在指定路由规则的时候通过/:key/:key
的方式来指定占位符
const routes = [
{path: "/two/:name/:age", component: two}
];
在指定Hash的时候, 通过/value/value
的方式来传递值
切换到第二个页面
在传递的组件的生命周期方法中通过 this.$route.params
的方式来获取
const two = {
template: '#two',
created: function () {
console.log(this.$route); // 路由对象
console.log(this.$route.params.name); // ls
console.log(this.$route.params.age); // 30
}
};
四、 嵌套路由
嵌套路由也称之为子路由, 就是在被切换的组件中又切换其它子组件
实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如:
/user/foo/profile /user/foo/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
借助 vue-router,使用嵌套路由配置,就可以很简单地表达这种关系。
例如: 如何实现下图效果
在第一个界面中又有两个按钮, 通过这两个按钮进一步切换第一个页面中的内容
1. 对第一个页面增加两个子组件
切换到第一个子页面
切换到第二个子页面
const one = {
template: '#one',
components: {
'onesub1': onesub1,
'onesub2': onesub2
}
};
2. 设置子按钮哈希值
切换到第一个子页面
切换到第二个子页面
3. 定义路由规则
注意: 子路由是定义到第一级路由中的
{
path: '/one',
component: one,
// 通过children配置子路由
children: [
{
// 注意: 如果是嵌套路由(子路由), 那么不用写一级路径的地址, 并且也不用写/
path: 'onesub1',
component: onesub1
},
{
path: 'onesub2',
component: onesub2
}
]
},
五、命名视图
命名视图和具名插槽很像, 都是让不同的出口显示不同的内容
命名视图就是当路由地址被匹配的时候同时指定多个出口, 并且每个出口中显示的内容不同
也可以用于同时 (同级) 展示多个视图,而不是嵌套展示
和匿名插槽一样, 如果指定了多个router-view
, 那么当路由地址被匹配之后, 多个router-view
中显示的内容是一样的
如果 router-view
没有设置名字,那么默认为 default
。
const routes = [
{
path: '/',
component: one
}
];
和具名插槽一样, 如果想同时显示多个不同的组件, 那么可以给出口指定名称
- 在路由规则中给组件起名称
const routes = [
{
path: '/',
// 确保正确使用 components 配置 (带上 s)
components: {
name1: one,
name2: two
}
}
];
- 在出口中指定显示哪个名称的组件
六、Watch
1. 监听数据的变化
Watch属性是专门用于监听数据变化的, 只要数据发生了变化, 就会自动调用对应数据的回调方法
new Vue({
el: '#root',
data: {
cityName: 'shanghai'
},
watch: {
cityName: function(newName, oldName) {
// ...
}
}
})
2. 监听路由变化
Watch属性不仅仅能够监听数据的变化, 还能够监听路由地址的变化,只要路由地址发生变化, 就会自动调用对应的回调函数
在开发中我们可以通过Watch来判断当前界面是从哪个界面跳转过来的
'$route.path': function (newValue, oldValue) {
console.log(newValue, oldValue);
}