vue2-3随笔 组件化/路由
0.前言
（1）安装 npm i vue-router
（2）使用
1. main.js：
import VueRouter from 'vue-router'
Vue.use(VueRouter)
2. route/Index.js（以下统称route文件）
import VueRouter from 'vue-router'
const router = new VueRouter({ ... })
export default router
3. 需要切换路由的文档
<router-link active-class="active" to="/about">About</router-link>
4. 需要展示的位置
<router-view></router-view>
（3）注意点
1.路由组件通常存放在```pages```文件夹，一般组件通常存放在```components```文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的```$route```属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的```$router```属性获取到。
1.路由具体使用
（1）.多级路由，跳转时：to绑定的应该是从跟路由开始到结束的完整路径
routes:[{
path:'/about',
component:About,
},{
path:'/home',
component:Home,
children:[{//通过children配置子级路由
path:'news', //此处一定不要写：/news
component:News },]}]
（2）路由跳转传参
1.可以再路由后直接接上
普遍写法： <router-link to="/home/news">News</router-link>
对象写法：
<router-link
:to="{
path:'/home/message/detail',
query:{ ... }}"
2.query参数： query:{id:666,title:'你好'}
接收时： $route.query
（3）路由命名与传params参
当需要跳转的路由名字过长时，可以在route文件配置router对象时，对每一个路由命名。 { name:'xiangqing',path:'detail/:id/:title', //使用占位符声明接收params参数 component:Detail }
类似query： params:{id:666,title:'你好' }
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
（4）props参数
1.死数据：props：｛a：90｝
2.params数据：props:true //把路由收到的所有params参数通过props传给组件，接收使用即可
3.query数据：
props(route){
return {}}
（5）replace属性
作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```
如何开启```replace```模式：```<router-link replace .......>News</router-link>```
（6）编程式路由导航
作用：不借助```<router-link> ```实现路由跳转，让路由跳转更加灵活
五个可使用的API
this.$router.push() // 追加历史记录
this.$router.replace() //替换当前记录
this.$router.forword() //前进
this.$router.back() //后退
this.$router.go() //既可前进也可后退
（7）缓存路由组件
作用：让不展示的路由组件保持挂载，不被销毁。
（8）两个新的生命周期钩子
1. ```activated```路由组件被激活时触发。
2. ```deactivated```路由组件失活时触发。
（9）路由守卫
1.前置路由守卫：router.beforeEach((to,from,next)=>{}) [去哪，从哪来，是否放行]
2.后置路由守卫：router.afterEach((to,from)=>{}) [去哪，从哪来]
3.独享路由守卫：beforeEnter(to,from,next){} [去哪，从哪来，是否放行]
4.组件内路由： beforeRouteEnter (to, from, next) { }, //进入守卫：通过路由规则，进入该组件时被调用
beforeRouteLeave (to, from, next) { } //离开守卫：通过路由规则，离开该组件时被调用
|<--- 组件内部 -->|
前置 进入 （组件） 离开 后置
（10）路由器工作模式
hash模式和history模式，hash模式代表着对于一个url中#号后面的内容就是hash值，在请求时不会带给服务器
hash模式：
1. 地址中永远带着#号，不美观 。
2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3. 兼容性较好。
history模式：
1. 地址干净，美观 。
2. 兼容性和hash模式相比略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
