共计 1196 个字符，预计需要花费 3 分钟才能阅读完成。
vue-router
1. 概念：这里的路由并不是指咱们平时所说的硬件路由器，这里的路由是 SPA（single page application 单页利用）的门路管理器，即 vue-router 就是 WebApp 的链接门路管理系统。
2.vue-router 是 Vue.js 官网的路由插件，它和 vue.js 是深度集成的，适宜用于构建单页面利用。vue 的单页面利用是基于路由和组件的，路由用于设定拜访门路，并将门路和组件映射起来。传统的页面利用，是用一些超链接来实现页面切换和跳转的。在 vue-router 单页面利用中，则是门路之间的切换，也就是组件的切换。路由模块的实质就是建设起 url 和页面之间的映射关系。
3. 路由实际上就是能够了解为指向，就是当在页面上点击一个按钮须要跳转到对应的页面，即路由跳转。
4. 路由的作用
依据 url 锚点门路，在容器中加载不同的模块，实质作用是做页面导航，实现 SPA 的开发
4.1 一种非凡的 web 利用，他将所有的流动局限于 web 页面中，仅在 web 页面初始化时加载相应的 html，JavaScript 和 css
4.2 一旦页面加载实现之后，spa 不会因为用户的操作而页面的从新加载或跳转，而是利用 javascript 动静的跳转 html，采纳的是 div 切换显示和暗藏，从而实现 UI 和用户的交互
5. 特点：
嵌套路由：容许定义嵌套的门路，每个门路能够映射到一个组件。
视图映射：能够定义一个路由组件对应多个门路。
动静路由：路由参数或查问参数能够用来动静匹配路由。
导航守卫：能够通过全局或组件内的守卫来监听并管制导航。
路由懒加载：能够异步加载组件，进步利用性能。
路由过渡成果：能够通过 CSS 过渡或 JavaScript 钩子为路由切换增加动画成果。
6.cmd 装置命令
npm install vue-router
7. 根本应用
导入 Vue 和 Vue Router。
定义路由组件和路由配置。
创立 Vue Router 实例，并将路由配置传递给它。
将 Vue Router 实例注入到 Vue 实例中。
import Vue from ‘vue’;
import VueRouter from ‘vue-router’;
Vue.use(VueRouter);
const Foo = {template: ‘<div>foo</div>’};
const Bar = {template: ‘<div>bar</div>’};
const routes = [
{path: ‘/foo’, component: Foo},
{path: ‘/bar’, component: Bar}
];
const router = new VueRouter({
routes
});
new Vue({
router,
template: ‘<div><router-link to=”/foo”>foo</router-link><router-view></router-view></div>’
}).$mount(‘#app’);
