Vue router的使用（一）基础篇
一、作用
路由，通俗的讲就是让不同的url显示不同的页面。 Router官方文档
前端路由/后端路由概念：
1.后端路由
新的url，都会向服务器请求新的html，服务端根据不同的url渲染不同的html返回，这样的路由方式在网络的情况就决定了显示的效果，若果网络较慢就可能出现白屏的现象（跳转了页面但是html还没有返回）。由服务端决定显示内容的称为后端路由，反之是前端路由。这样，后端只用提供api去返回数据即可，前后端负责的内容就有了明确的划分。
2.前端路由
为了应对这样的问题，前端可以一次性请求到全部的html/css/js代码（主要是样式代码、三方库代码、业务逻辑代码、静态资源等），然后根据用户的点击自行在本地进行显示的切换（不同的url对应不同的样式，仍然需要调用api去加载数据，这样不会是白屏等待）。但是，由于一次加载全部的数据也会很多，时间就会很长，那么用户第一次打开仍然较慢，这样又引入了逐步加载文件的技术（路由懒加载）。
二、集成
router 也是vue的一个插件，所以使用的时候也需要注册，安装router后，router会自动在全局注册一些组件，比如router-view 、router-link。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
三、配置路由
一般会单独放一个文件夹，里面写路由文件，一般用index.js 命名表示入口文件（引入文件如果路径写到的是文件夹，则会默认去找index文件加载）。路由配置时是路由的核心，用于配置url和组件的映射关系，具体参数含义见下文：
// 注册router
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 模块引入
const AAAA = () => import("XXX_Path_XXX")
// import AAAA from "XXX_Path_XXXt";
// 路由配置
const routes = [
{
path: '/',
redirect: '/XXX_Path_XXX',
name: 'AAAA',
component: AAAA
},
{
path: '/abcXXX',
name: 'AAAA',
component: AAAA,
children: [
{
path: 'home',
name: 'Home',
component: Home
},
]
},
]
// 创建路由对象并导出，在main.js文件中导入并使用即可
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
})
export default router
// main.js中 直接添加即可
import router from 'XXX/router/index'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
配置说明：
1.在进入模块时，使用const AAAA = () => import("XXX_Path_XXX")的方式比import更优，这种方式为路由的懒加载，在需要的时候才回去加载该模块的文件
2.path参数，用于指定路由路径，并非完整路径，同时在最前面需要有/，同时path需要是全路径唯一的，即父路由拼接子路由得到的全路由唯一。
3.redirect参数，用于重定向path，如果匹配到path则会跳转到redirect
配置的内容
4.component参数，即展示的页面组件
5.children参数，子路由，即在此路由页面中仍然有其他路由页面则配置再此，注意子路由的path前面是不需要/的，子路由也可有子路由。子路由在url上的显示是 路由/子路由的方式
6.mode参数，用于设置跳转方式，默认是hash跳转。hash 跳转在url上可以看到是有#拼接了路径，一般会使用history的方式
7.base参数，配置路由前面的路径，即发生路由时，完整的路由是base路径于路由路径拼接而成
8.name参数，在路由跳转的时候可以直接以此为跳转标识（参考四.2代码跳转）。
注意1：
下面的两种写法是不等效的，虽然这样两种写法都能路由到 /abc/abc，但是写法一是会把组件test1中的router-view进行替换，test1中的其他元素仍然显示。写法二则替换的是本身的router-view（即写法一中/abc所替换的router-view）
{
// 写法一：
path: '/abc',
name: 'test1',
component: test1,
children: [
{
path: 'abc',
name: 'test1',
component: test1,
},
]
},
{
// 写法二：
path: '/abc/abc',
name: 'test2',
component: test2
},
注意2：
路由同名会引起冲突，Vue会对先写的路由执行，Console中会有一个警告[vue-router] Duplicate named routes definition: { name: "XXX", path: "XXX" }
四、使用路由
路由使用有两个关键点，显示的位置和路径（路径决定了显示的内容），位置使用标签router-view，加载出的内容会替换这里router-view的占位，页面url决定了路径。
1.直接在标签中使用
页面中可以使用router-link渲染一个元素去绑定跳转的路径，使用也十分简单。
代码如下：
<router-link to="/XX/XX">显示</router-link>
<router-view></router-view>
<router-link>默认会渲染成a标签，上面代码的意思当点击显示的时候，下面的<router-view> 会显示在配置中路径/XX/XX中的内容
1> router-link的一些属性
to: 表示要跳转的路径
tag: 表示要渲染的类型，默认渲染是 a 标签，如果要渲染成其他类型的则可以通过tag设置：
<router-link to="/XXX" tag="button">显示按钮</router-link>
replace: 表示切换的方式是replace而不是push，这样就在切换的时候返回键不会有作用（没有入栈）。该不用设置任何值
active-class: 表示指定当前激活的class名称，默认是其他的名称，当路由是此link的时候，该组件会自动添加一个active-class的class，这里如果指定了名称则会显示这里的类名。可用于点击后样式改变的需求。如果设置路由中的linkActiveClass属性，则可以全局修改激活的class名称。代码如下：
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
linkActiveClass:'新的类名'
})
2><router-view>可以直接使用单标签<router-view/>
2.代码跳转
router 会在所有Vue组件中绑定一个$router属性，使用 this.$router.push方法跳转，$router就是配置路由时的那个router对象
方式一：通过path跳转，必须是全路径，即使是在children里
// 写法一
this.$router.push('/XXX/XXX全路径')
// 写法二
this.$router.push({
path:'/XXX/XXX全路径',
})
方式二：通过name跳转，使用声明路由的时候定义的name（name是唯一的）
this.$router.push({
name:'AAAAAA',
})
3.参数传递 / 路由传值
方式一：通过query方式
在路由跳转后会看到在原始的URL路径后多了query内容（在浏览器上显示的路径多出的?key1=value1&key2=value2部分称为query）
// 跳转方传值, 添加query对象
this.$router.push({
path:'/XXX/XXX全路径',
query:{
key1:value1,
key2:value2,
}
})
// 接收方取值，通过$route对象query属性
mounted() {
this.$route.query.key1,
this.$route.query.key2,
},
方式二：通过params方式
此处用的是name
// 跳转方传值, 添加params对象
this.$router.push({
name:'AAAAAA',
params:{
key1:value1,
key2:value2,
}
})
// 接收方取值，通过$route对象query属性
mounted() {
this.$route.params.key1,
this.$route.params.key2,
},
注意：
1.当使用path方式路由时，会忽略params属性，所以需要使用query方式传参。
2.当使用name方式路由时，params和query都是有效的，传参和取参对应即可。
3.当使用query方式传时，由于路由信息会反应到路径中，刷新当前页面后query也能取到参数信息。（作者推荐使用此方案，此方案下其他问题参考高级篇）
4.当使用params方式传参时，路由信息不会反应到路径中，刷新后到导致params信息丢失。解决这个问题的官方方案是通过配置将参数信息保存在组件的props属性中，参考路由组件传参
方式三：动态路由方式
参考下文
五、动态路由
通过给路由路径后添加附加的内容进行传参，跳转后url类似XXX/参数值1/参数值2
动态路由配置方式：xxx/:param1/:param2
/:param1即是动态路由的写法，但是这样的方式传参只能使用代码跳转中方式一的方式进行， 路径中的参数值需要自己去拼接
// 配置方式
{
path: '/XXX/:id',
name: 'AAAA',
component: AAAA
},
// 跳转方式
this.$router.push('/XXX/XXX全路径/abcdefg')
// 取值方式
mounted() {
// param 的值即是 abcdefg， id 即是配置中写的 “:id”，一一对应
const param = this.$route.params.id,
},
注意：
1.多个参数的配置只用再后面继续拼接即可，如/:id/:name,使用方式同一样，需要注意的是参数必须按顺序拼接路径，否者不能正确的获取。
2.对于不定参数可以使用?去修饰，表示非必须参数，如/:id?`则表示id是可选参数
