前言
地址栏路由的发展经历了后端路由配置阶段、前后端分离阶段、直至单页面富应用阶段。本文来总结一下 vue-router 的相关知识点和用法。
正文
1、什么是 vue-router 路由
路由就是SPA（单页应用）的路径管理器,vue-router就是WebApp的链接路径管理系统。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。总之，在vue中页面路径的改变就是组件的切换。
2、通过router-link访问路由实例
（1）普通路由的使用，分如下三步：
a、注册路由组件并定义路由表
b、创建路由实例并挂载到根实例
c、通过 router-link 组件来导航路由,通过router-view来渲染对应的组件，同时导航栏地址跳转。
具体代码如下：
<body>
<div id="app">
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link :to="{name:'bar',params: { bar: 123 }}">Go to Bar</router-link>
<router-link :to="{name:'car',query: { car: 234 }}">Go to Car</router-link>
</p>
<!-- 路由出口:路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
</body>
<script>
// 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Car = { template: '<div>Car</div>' } //定义路由表
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
{ path: '/foo', name: 'foo',component: Foo },
{ path: '/bar', name: 'bar',component: Bar },
{ path: '/car', name: 'car',component: Car }
]
// 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写) 相当于 routes: routes
})
// 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount('#app')
</script>
上面的代码中，通过router-link访问路由实例，第一个标签中to属性值匹配路由表中path属性，后面两个通过name值去匹配路由表中的name属性，并且分别传递了参数，注意观察对应的地址栏变化。
（2）嵌套路由
<body>
<div id="app">
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
</body>
<script>
const Foo = { template: '<div>foo</div>' }
const Bar = {
template: `<div>
<router-link to="/bar/car">to Car</router-link>
<router-link :to="{name:'dar',query:{dar:123}}">to Dar</router-link>
<router-view></router-view>
</div>` }
const Car = { template: '<div>Car</div>' }
const Dar = { template: '<div>Dar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{
path: '/bar', component: Bar,
children: [
{ path: 'car',name:"car", component: Car },// 这里需要注意子路由path的用法，若前面加了"/" 表示该路由为根路径，router-link中to 需要对应根路径，不推荐在子路由前加"/"
{ path: 'dar', name:"dar",component: Dar }
]
}
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
运行效果如下：
上面的代码中在根路由中嵌套了子路由，同样通过router-link的方式来访问，也支持name属性匹配路由表和传递值等操作，需要注意子路由推荐使用path属性值不带"/"
3、通过 $router 的实例方法访问路由实例
通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由,在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router对象完成。该方法等同于前面的声明式访问路由实例。
this.$router.push()该方法的参数可以是一个字符串路径，或者一个描述地址的对象，该方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
<body>
<div id="app">
<p>
<button @click="handleFoo">to Foo </button>
<button @click="handleBar">to Bar</button>
</p>
<router-view></router-view>
</div>
</body>
<script>
const Foo = { template: '<div>foo{{this.$route.params.foo}}</div>' }
const Bar = { template: '<div>bar{{this.$route.query.bar}}</div>' }
const routes = [
{ path: '/foo', name: 'foo',component: Foo },
{ path: '/bar', name: 'bar',component: Bar },
]
const router = new VueRouter({
routes
})
const app = new Vue({
router,
methods:{
handleFoo(){
this.$router.push({name:"foo",params:{foo:123}})
},
handleBar(){
this.$router.push({path:"/bar",query:{bar:234}})
}
}
}).$mount('#app')
</script>
但是在重复点击按钮，路由重复时，控制台出现报错，如下：
上面的报错是因为push方法导致路由重复在当前路由，这里需要在原型上修改push方法，代码如下：
//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push;
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch((err) => err);
};
除了this.$router.push()之外还有别的访问路由实例方法，如：this.$router.replace()不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
this.$router.go(n) 在history 记录中向前或者后退多少步，类似 window.history.go(n)。
4、this.$router 和 this.$route 的区别及使用
this.$router：是全局路由器 router 的实例，可以在任何组件内进行访问，路由实例里面有很多属性和方法，比如push方法。
this.$route：是当前激活的页面的路由信息对象，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)，也有一些属性，这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化) 它。
总之，可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由。
5、动态路由
某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径： /user/aaaa或/user/bbbb。除了有前面的/user之外，后面还跟上了用户的ID 这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。代码如下：
<div id="app">
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar/123">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
<script>
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar/:id", component: Bar },
];
const router = new VueRouter({
routes,
});
const app = new Vue({
router,
}).$mount("#app");
</script>
运行结果如下：
写在最后
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
