Vue的vue-router基本使用
一、Vue-router是什么?
Vue Router是Vue.js的路由管理器。和Vue.js的核心深度集成，是SPA单页应用的路径管理器，适合用于构建单页面应用。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来；传统的页面应用，是用一些超链接来实现页面切换和跳转的；在Vue-router单页应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系；
实现原理：单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而只是更新某个指定的容器中的内容。核心是：更新视图而不重新请求页面；前端路由又两种方式；详情：https://www.cnblogs.com/xsk-walter/p/12663694.html
Vue Router 的功能：官方文档：
1：嵌套路由/视图；
2：模块化的、基于组件的路由配置；
3：路由参数、查询、通配符；
4：基于Vue.js过渡系统的视图过渡效果；
5：自定义的滚动条行为；
6：H5的history模式和Hash模式
二、Vue-router的使用方式
1：下载： npm install vue-router -S
2：在main.js中引入：import VueRouter from 'vue-router'
3：安装插件Vue.use(VueRouter)
4：创建路由对象并配置路由：const router = new VueRouter({ routes: [ { path: '/home', component: Home } ] })
5：将其路由对象传递给Vue的实例
6：在入口文件中留坑：<router-view></router-view>
// 在main.js文件中引入 import Vue from 'vue' import VueRouter from 'vue-router' // 安装插件 Vue.use(VueRouter) // 创建路由对象并配置路由规则 const router = new VueRouter({ routes: [{}] }) // 启动 new Vue({ el: '#app', router, render: c => c(App) }) // app.vue <template> <div id="app"> <router-view></router-view> // 留坑 </div> </template>
三、基础
1：动态路由匹配
我们经常需要把某种模式匹配到所有的路由，全部映射到同个组件
const User = { template: '<div>User</div>' } // 动态路由参数以冒号开头 const router = { routes: [{ path: 'user/:id', component: User }] }
// 像/user/123和/user/456都将映射到同一个路由；
一个路径参数使用冒号标记，当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用；
其中$route对象还提供了其他有用的信息；
## 正则在url传值的作用：path: 'user/:id(\\d+)' 加入了正则，只能传递数字类型的id，否则组件接收不到；
## 注意：当使用路由参数时，从/user/123导航到user/456时，原来的组件实例会复用；此时组件的声明周期钩子就不会再被调用；复用组件时，相对路由参数的变化做出相应的话，你可以简单的watch监听$route对象或者导航守卫；
## 404页面设置和捕获所有路由：
// 设置404页面 { path: '*', component: Error } // 新建404页面 <template> <div> <h2>{{ msg }}</h2> </div> </template> <script> export default { data () { return { msg: 'Error:404' } } } </script> // 当路由不存在时，会进入到404页面
##如果想要匹配到任意路径：可以使用通配符*；当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分
2：编程式和声明式导航 详情见：https://www.cnblogs.com/xsk-walter/p/12663615.html
3：命名路由
# 通过一个名称来标识一个路由显得很方便，特别是在链接一个路由或者执行一些跳转的时候；可以在创建router实例的时候，在routes配置中给某个路由设置名称；
// 链接到一个路由 <router-link :to="{ name: 'user' , params: { userId: 123 }}">User</router-link> // 编程式跳转 this.$router.push({ name: 'user', params: { userId: 123 } })
// 两种方式都会把路由导航到 /user/123
4：路由组件传参
# 三种模式： 布尔模式、对象模式和函数模式
1：布尔模式：由于普通组件和路由组件传参形式不同，路由组件传参布尔模式需要在route中添加props:true,会把params中的键值对以props的形式传入组件中，使普通组件当做路由组件使用；
