vue-router

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');