一、什么是Vue Router
Vue Router的作用就是根据不同的路径映射到不同的视图。
Vue Router（路由）就是SPA（单页应用）的路径管理器。SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面
Vue Router 是 Vue.js 官方的路由管理器，可以用来帮我们解决路由的问题。Vue Router 的能力十分强大，它支持 hash、history、abstract 3 种路由方式，提供了
二、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 Router挂载到了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);
}