1. 基本使用
1.1 安装
npm install vue-router --save
2. vue执行的流程图
3. 路由的默认值和修改为history模式
3.1 路由的默认值:添加一个组件
{ path: '', redirect: '/home' }
3.2 修改为history模式:在路由对象下添加mode属性
const router = new Router({ routes, mode:'history', })
4. router-link其他属性补充
4.1 tag属性
可以指定<router-link>之后渲染成什么组件, 比如下面的代码会被渲染成一个<button>元素, 而不是<a>,默认是<a>标签
<template> <div id="app"> <router-link to="/home" tag="button">首页</router-link> <router-link to="/about" tag="button">关于</router-link> <router-view></router-view> </div> </template>
4.2 replace属性
replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中,
背景:当路由模式是history模式时,默认使用的是pushState方法(类似于栈模式,特点是先进后出),这种情况下,我们是可以通过浏览器的返回按钮来进行返回的
<template> <div id="app"> <router-link to="/home" tag="button" replace>首页</router-link> <router-link to="/about" tag="button" replace>关于</router-link> <router-view></router-view> </div> </template>
4.3 active-class属性
当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称
<template> <div id="app"> <router-link to="/home" tag="button" replace active-class="active">首页</router-link> <router-link to="/about" tag="button" replace active-class="active">关于</router-link> <router-view></router-view> </div> </template>
该class具体的名称也可以通过router实例的属性进行修改
export default new Router({ routes, mode: "history", linkActiveClass: "active" });
4.4 问题:刚才为了让路由组件之间能够跳转,我们使用了router-link标签。如果我们不想要写router-link呢?
解答:可以通过组件的$router属性实现同样的效果:
<template> <div id="app"> <button @click="homeClick">首页</button> <button @click="aboutClick">关于</button> <router-view></router-view> </div> </template> <script> export default { name: 'App', methods: { homeClick () { // 通过代码的方式修改路由 vue-router // this.$router.push('/home'); this.$router.replace('/home'); }, aboutClick () { // this.$router.push('/about'); this.$router.replace('/about'); } } } </script>
5. 动态绑定路由
5.1 通过动态绑定属性,动态绑定路由
5.2 获取动态路由中 userId 的信息
5.3 补充:$router 和 $route 区别
r o u t e 就是表示,当前哪个路由处于活跃状态,这个route表示的就是哪个路由组件。
r o u t e r 是我们在router/index.js当中创建的router对象,就是路由对象。这个路由对象当中有好几个路由。哪个路由处于活跃状态,route就是表示哪个路由组件。