持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情juejin.cn/post/714765… 今天给大家分享一下Vue路由。 Vue Router是Vue.js官方的路由管理器。它和Vue.js
安装方式
- 使用NPM安装，那就需要在main.js里把路由注入到Vue实例上。
- 安装步骤：是已经安装完vue2的环境了，然后在终端下载依赖，命令如下：
cnpm i vue-router@3 -D在vue2中使用。 - 下载好依赖之后，在main.js里引入，
import VueRouter from "vue-router"，然后把VueRouter添加到Vue实例上。
import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter);//注册路由
我们现在用的是history模式路由 view文件夹里放的是一级路由的组件 components里放的是非路由组件。也就是作为路由组件的子组件存在的。
router文件夹下的index.js做了哪些事情？
- 引入vue和vue-router。
- 又引入了一个子组件，用来跳转
- 注册路由
- 设置路由的匹配规则
- 构造路由对象，最终生成的就是在组件里使用的路由对象。 mode属性：告诉路由使用哪种模式跳转 base: routes:把设置好的路由匹配规则放在这里
main.js里做了什么？
把上面暴露出来的路由对象作为vue根实例的router属性存进去。
this.$router可以访问我们new出来的路由器对象- 动态路由指的就是路由之间传值，其实指的就是通配符params。可以用params传id，然后id不同渲染的是不同的组件页面。
- 动态参数指的就是动态路径参数。不同的人可以传不同的数据过去，它使用起来就是和params没什么两样。
- 接收动态路径传过来的参数。
如何通过params设置动态的路由传值？
<router-link :to={name:'',params:{属性名：要传的属性值}></router-link>
响应路由参数的变化
传的路由参数变化了，路由组件在模板里接收的route`。
router-link组件
- 属性1：
replace添加该属性，那么就没有历史记录了，点击浏览器前进后退就不生效了。 - 属性2：
append设置append属性后，则在当前 (相对) 路径前添加基路径。例如，我们从/a导航到一个相对路径b，如果没有配置append，则路径为/b，如果配了，则为/a/b - 属性3：
tag="span"就会把<router-link>转换成我们想要的标记，默认是超链接a - 属性4：
active-class。它是不精准匹配 - 属性5：精准匹配通过类名
.router-link-exact-active
