1.路由简介

路由是一条条对应的key-value关系，key就是前端地址栏的路径，value就是对应的组件，用于展示对应内容
路由器：统一管理多条路由
工作过程：当浏览器的地址发生改变时，对应的组件就会显示

2.路由基本使用

准备路由组件

//Home组件
//About组件

创建并保留路由配置文件，编写路由规则

//引入路由需要用到的组件
import Home from '../components/Home'
import About from '../components/About'
//引入路由工具库
import VueRouter from 'vue-router'
//创建并暴露路由
const router=new VueRouter({//配置路由规则routes:[{path:'/home',component:Home},{path :'/about',component:About}]})
export default router

在main.js中挂载路由

import Vue from 'vue'
import App from './App.vue'
// 引入vue-router组件库
import VueRouter from 'vue-router'
//引入路由配置文件
import router from './router'Vue.config.productionTip = false
// 使用插件
Vue.use(VueRouter)
new Vue({render: h => h(App),router, //挂载路由
}).$mount('#app')

在App.vue中使用 router-link 和router-view标签放路由的key和路由的value
```
 AboutHome
```
路由的注意事项
1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。
  homeRoute===aboutRoute
  false
  homeRouter===aboutRouter
  true
3.嵌套路由
1. 配置路由规则，使用children配置项：
```
routes:[{path:'/about',component:About,},{path:'/home',component:Home,children:[ //通过children配置子级路由{path:'news', //此处一定不要写：/newscomponent:News},{path:'message',//此处一定不要写：/messagecomponent:Message}]}
]
```
2. 跳转（要写完整路径）：
```
News
```
4.传递路由的query传参

有两种query传参方式，分别是字符串传参和对象传参

给detail传递参数
```
跳转
path:'/home/message/detail',query:{id:666,title:'你好'}}"
>跳转
```
在detail接受参数
```
$route.query.id
$route.query.title
```
# 5.传递路由的params参数

有两种params传参方式，分别是字符串传参和对象传参

给Deatil组件传递参数

第一步，在router.js的配置文件中声明参数的占位符
```
{path:'/home',component:Home,children:[{path:'news',component:News},{component:Message,children:[{name:'xiangqing',path:'detail/:id/:title', //使用占位符声明接收params参数component:Detail}]}]
}
```
第二部，跳转并携带参数
```
 跳转{{m.title}}跳转
```
第三步，接受使用参数
```
$route.params.id
$route.params.title
```
特别注意，当使用params传参时，若使用to的对象写法，则不能使用path配置，只能使用name命名路由配置

6.路由的props传参配置

路由的props的出现是为了让路由组件能够更方便的接受参数

props配置有三种写法，分别是对象，布尔值和函数写法
```
{name:'xiangqing',path:'detail/:id',component:Detail,//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id:route.query.id,title:route.query.title}}
}
```
7.路由router-link标签的replace属性
1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录（入栈），replace是替换当前记录（先出栈顶元素，再入栈）。路由跳转时候默认为push
3. 如何开启replace模式：News
8.编程式路由导航

不使用router-link标签进行路由跳转，而是使用$router提供的api进行跳转，push函数是入栈跳转，replace函数是替换跳转

配置对象的写法与router-link to熟悉配置对象的写法一致
```
//$router的两个API
this.$router.push({name:'xiangqing',params:{id:xxx,title:xxx}
})this.$router.replace({name:'xiangqing',params:{id:xxx,title:xxx}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退 正数前进几步，负数后退几步
```
9.缓存路由组件

当一个路由组件A中出现输入类元素，比如文本框时，假如我们从A路由切换到B路由，因为路由切换实际上是销毁了路由组件，所以之后再重新切回A路由，A路由组件的文本框数据已经丢失了。所以我们要对A路由进行缓存，缓存的方式是使用keep-alive标签，包裹住A组件的显示区域，配合include属性使用

include属性值是组件名，而不是命名路由的名字
```
如果想要缓存多个路由组件，可写:include=['News','Message']   
 
```