1.什么是Vue Router？
Vue路由(Vue Router)通俗的说，就是Vue应用中的路径管理器，我们需要做的就是把Vue中的组件映射到路由上，让Vue Router知道在什么地方渲染他们
2.为什么要用Vue Router？
在Vue中，我们为什么不和传统页面应用一样直接用<a>标签来进行页面间的跳转？
在使用Vue创建的单页面应用中，在进行打包上线时，打包完成后，会生成一个dist文件夹，里面只存在一些静态资源和index.html页面，所以传统的<a>标签是不起作用的，只能使用Vue Router进行页面间的跳转
3.Vue Router实现方式
更新视图但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式：①：hash模式 ②：history模式
在Vue中，通过在Vue Router实例中配置mode来改变其实现方式，默认是hash模式
区别：hash模式在浏览器地址栏会显示锚点链接形式，而history模式和正常网址格式相同
4.Vue Router的使用
1.安装 npm install vue-router -s
2.在src目录下创建router目录，接着创建index.js文件
3.在index.js文件中引入Vue以及路由 import VueRouter from 'vue-router'
4.挂载路由 Vue.use(VueRouter)
5.创建路由对象并配置路由规则 const router = new VueRouter({routes: [{ path: '/home', component: Home }]})
6.将路由对象传递给路由实例，在main.js文件路由实例中添加router
7.在app.vue中预留路由出口 <router-view></router-view>
index.js文件
// 引入依赖
import Vue from "vue";
import VueRouter from "vue-router"
import Home from "../components/Home.vue"
// 挂载
Vue.use(VueRouter)
// 创建实例并配置
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home }
]
});
// 导出
export default router
main.js文件
new Vue({
// 让 vue 知道我们的路由规则
router,
render: h => h(App),
}).$mount('#app')
app.vue文件
<div id="app">
<router-view></router-view>
</div>
注意：vue-router版本选择
5.Vue Router常用传参方式
Vue Router的传递参数一共分为两大类：
①：声明式导航传参<router-link> ②：编程式导航传参router.push()
1.声明式导航传参
// 通过 <router-link> 的to属性属性值拼接直接进行传参
// 父组件
<router-link to = "/跳转路径/传入的参数"></router-link>
eg: <router-link to="/home/2/张三">GO Home!</router-link>
// 子组件
// 通过 this.route.params 接收参数
mounted() {
console.log(this.$route.params)
}
// 路由配置
{ path: '/home/:id/:name', component: Home }
// 地址栏显示
http://localhost:8080/#/home/2/张三
注意：通过声明式导航传递方式参数，参数会直接显示在地址栏上
2.编程式导航传参
①.调用 $router.push()传参
// 父组件
// 绑定点击事件，实现跳转并传参
methods: {
toPush(id) {
this.$router.push({
path: `/toPush/${id}`
})
}
}
// 子组件
// 通过 this.route.params 接收参数
mounted() {
console.log(this.$route.params)
}
// 路由配置
{ path: '/toPush/:id', component: toPush }
// 地址栏显示
http://localhost:8080/#/toPush/3
注意：与声明式导航传递方式参数相同，参数会直接显示在地址栏上
②.通过params传参
// 根据路由中name属性匹配路由，再根据params传参
methods: {
toParams() {
this.$router.push({
name: toParams,
params: {
id: 4,
name: '王五'
}
})
}
}
// 子组件接收参数
<h2>传入参数:{{'编号:'+this.$route.params.id+'-----'+'姓名:'+this.$route.params.name}}</h2>
// 路由配置
{ path: '/toParams', name: toParams, component: toParams }
// 地址栏显示
http://localhost:8080/#/toParams
注意：通过params方式传参：1.地址栏不会出现参数 2.再次刷新页面数据会丢失
③.通过query传参
// 跟据路由中path属性匹配路由，在根据query传参
methods: {
toQuery() {
this.$router.push({
path: '/toQuery',
query: {
msg: "通过query传递的数据！"
}
})
}
}
// 子组件接收参数
<h2>传递数据：{{ this.$route.query.msg }}</h2>
// 路由配置
{ path: '/toQuery', name: toQuery, component: toQuery }
// 地址栏显示
http://localhost:8080/#/toQuery?msg=%E9%80%9A%E8%BF%87query%E4%BC%A0%E9%80%92%E7%9A%84%E6%95%B0%E6%8D%AE%EF%BC%81
注意：通过query方式传参：1.地址栏会出现解析的地址 2.再次刷新页面数据也不会丢失
6.Vue Router二级路由的配置
什么是二级路由？二级路由就是在一级路由的基础上嵌套的又一层路由模式
为什么要使用二级路由和多级路由？ 在Vue项目中会有很多个路由，同时也会又很多<router-view>，如果不采用分级路由，多个<router-view>会造成页面内容的显示混乱，这样对于用户交互是不友好的，所以要采用二级和多级路由
1.二级路由的配置
// 在一级路由的配置中添加 children 属性，属性值为一个数组
{ path: '/home', component: Home, children: [
{ path: '/home/secondRouter', component: secondRouter }
]}
// 在一级组件中添加二级路由的出口
<router-view></router-view>
注意：多级路由类似配置方式类似
7.Vue Router懒加载
什么是Vue Router懒加载？ 整个网页默认打开就加载全部内容，路由懒加载就是只加载你当前点击的那个模块
为什么使用Vue Router懒加载？ 在Vue应用中，项目和首屏加载过于缓慢，使用Vue Router懒加载按需加载资源，提高首屏的加载速度，对项目进行优化
// 原始方式
import Home from "../pages/Home"
// 懒加载方式
const Home = ()=>import('../pages/Home');
8. $route 和 $router 的区别
$router 是 VueRouter 的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，是一个全局对象，他包含了所有的路由包含了许多关键的对象和属性
$route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等我们可以从vue devtools中看到每个路由对象的不同
