持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情juejin.cn/post/714765…

vue路由

vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌，包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于Vue.js过渡系统的视图过渡效果
• 细粒度的导航控制 （指的是精确程度）
• 带有自动激活的CSS class的链接
• HTML5历史模式或hash模式，在IE9中自动降级（监听主要有两种方式，默认是h5的history。IE9会自动变成hash）
• 自定义的滚动条行为 （一般通过插件来控制）

安装

可以直接安装配置好的router

其余的选项直接空车即可。
这样就会得到一个这样的文件。如下：

基于路由的单页面环境就创建好了。
以下都是单独的配置文件，一般不做任何修改：

路由模块，放的是路由对象的配置：

放的是路由切换组件：

动态路由

设置动态路径参数

接收路径参数：this.$route.params

也可以：

多个参数的话，如下所示：

如果是动态的值

如果是动态的值，写法是把to的值写成对象的格式，通过动态绑定的形式写成对象的格式。用name属性来确定路径（name就是路由组件里面的name）

前面的写法，如果直接使用传过的值的话，监听渲染组件会有一点问题，因为当使用路由参数时，例如/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同一个组件，比起销毁在创建，复用显得更加高效，不过这也意味着组件的生命周期钩子不会再被调用，要通过watch来响应路由参数的变化。侦听$route。如下所示：

嵌套路由

在router对象里配置二级路由，通过增加children对象，数组的形式。

编程式导航：

Router-link的属性
to:可以写成表达式。to=" '/about/' "。 可以写成对象的形式 to="{name:'',params:{}}"
replace:没有历史记录，不能前进后退了。
append:
tag="标记":可以修改router-link渲染的标记。默认是a
active-class:设置样式
exact:精确匹配。