一、定义：Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
- 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
- 前端路由：key是路径，value是组件。
二、路由配置步骤
（1）安装路由
npm install vue-router --save
（2）在src目录下新建router文件夹，并创建index.js文件
（3）在main.js中引入并使用
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
（4）编写router配置项
index.js中
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
}
]
})
//暴露router
export default router
（5）实现切换（active-class可配置高亮样式）
<router-link active-class="active" to="/about">About</router-link>
（6）指定展示位置
<router-view></router-view>
注意：
- 路由组件通常存放在
pages或views文件夹，一般组件通常存放在components文件夹。 - 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
- 每个组件都有自己的
$route属性，里面存储着自己的路由信息。 - 整个应用只有一个router，可以通过组件的
$router属性获取到。
三、router-view 和 router-link
（1）router-view
- （1.1）用于放置子路由，路由匹配的组件渲染在这里
-
（1.2）可以根据需要调整位置，有这个标签才能渲染子路由
（只要有子路由，都要在配置好router/index.js后，在父路由组件下放置这个标签）
（2）router-link
- 类似a标签，最后会转成a标签
<router-link to='路由地址'>{ 内容 }</router-link>
四、配置根路由 和 404页面
（1）配置根路由
- 因为main.js文件中的render渲染了一次App.vue组件（搭建了一个舞台），其他所有的组件就可以渲染到App.vue上进行展示，当根路由对应的组件又绑定App.vue时，又渲染了一次App.vue（内容重复出现两次），所以根路由不绑定组件，直接设置重定向（redirect）
{
//配置根路由
path: '/',
//重定向
redirect: '/film/nowList'
},
（2）配置404页面
- 在Vue项目中，当访问的页面路由不存在或错误时，页面显示为一片空白。然而，通常我们需要对访问url不存在或者错误的情况下添加默认的404页面，即Not found页面。（路由地址设置为：*）
{
// 404页面配置
path: '*',
component: ()=>import('@/components/NotFound')
}
五、路由跳转
1、声明式导航
（1）定义：写在template标签里，点击链接（<router-link></router-link>）实现导航跳转的方式,叫做声明式导航。
（2）作用：实现路由跳转。
（3）使用方法：
跳转路由并携带params参数，to的字符串写法
<router-link :to="路径">`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
to的对象写法
<router-link :to="{
name:'xiangqing',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
（4）<router-link>的replace属性
作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push。
如何开启replace模式：<router-link replace >News</router-link>。
2、编程式导航
（1）定义：在浏览器中，在js中处理逻辑后 调用API方法实现导航跳转的方式，叫做编程式导航。
（2）作用：不借助<router-link> 实现路由跳转，让路由跳转更加灵活。
（3）使用方法：
-this.$router.push('Hash地址')
跳转到指定Hash地址，且增加一条历史记录
-this.$router.replace('Hash地址')
跳转到指定Hash地址，且替换掉当前历史记录
-this.$router.go('Number')
在浏览器历史记录中前进或者后退（1、-1......）如果超出上限的话，则原地不动 (不常用)
-this.$router.back()
后退一个历史页面
-this.$router.forward()
前进一个历史页面
总结：编程式导航更好用：因为可以书写自己的业务逻辑，让路由跳转更加灵活。
3、注意
现象：编程式导航路由跳转到当前路由(参数不变), 多次执行会抛出NavigationDuplicated的警告错误。声明式导航是没有这种问题，因为声明式导航内部已经解决这种问题。这种异常，对于程序没有任何影响的。
为什么会出现这种现象:
由于vue-router最新版本3.5.2，引入了promise，当传递参数多次且重复，会抛出异常，因此出现上面现象,
第一种解决方案：是给push函数，传入相应的成功的回调与失败的回调
第一种解决方案可以暂时解决当前问题，但是以后再用push|replace还是会出现类似现象，因此我们需要从‘根’治病；
4、缓存路由组件（了解）
作用：让不展示的路由组件保持挂载，不被销毁。
-
具体编码：
vue组件中<keep-alive include="News"> <router-view></router-view> </keep-alive>
六、路由传参
1、query参数
（1） 传递参数
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
（2）. 接收参数：
$route.query.id
$route.query.title
2、params参数
（1）. 配置路由，声明接收params参数（router/routes.js）
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', //使用占位符声明接收params参数
component:Detail
}
]
}
]
}
（2）传递参数
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
（3） 接收参数：
$route.params.id
$route.params.title
3、差别
（1）query传参显示参数，params传参不显示参数，params相对于query来说较安全一点。
（2）取值方法也有不同：
query取值：this.$route.query.XXX
params取值: this.$route.params.xxx
（3）query传值页面刷新数据还在，而params传值页面数据消失。
4、路由传递props
作用：让路由组件更方便的收到参数
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件（静态数据，很少用）
// props:{a:900}
//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第三种写法：props值为函数，一般是把query参数与params参数当中props传递给路由组件
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
}
七、多级路由
-
配置路由规则，使用children配置项：
routes.js中routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path:'news', //此处一定不要写：/news component:News }, { path:'message',//此处一定不要写：/message component:Message } ] } ] -
跳转（要写完整路径）：
<router-link to="/home/news">News</router-link>
八、命名路由
作用：可以简化路由的跳转。
-
如何使用：
{ path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'welcome', component:Hello, } ] } ] }-
简化跳转：
<!--简化前，需要写完整的路径 --> <router-link to="/demo/test/welcome">跳转</router-link> <!--简化后，直接通过名字跳转 --> <router-link :to="{name:'hello'}">跳转</router-link> <!--简化写法配合传递参数 --> <router-link :to="{ name:'hello', query:{ id:666, title:'你好' } }" >跳转</router-link>
-
九、路由器的两种工作模式
- 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
- hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
- hash模式：
（1）地址中永远带着#号，不美观 。
（2） 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
（3） 兼容性较好。 - history模式：
- 地址干净，美观 。
- 兼容性和hash模式相比略差。
- 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
