安装vue-router
npm install vue-router --save-dev
路由配置文件src/router/index.js
引入组件 improt 组件名 from '相对路径'
增加路由配置
{
path:'路径（和router-link to后面的一致）'
name:'组件名'（可有无）
componet :引入时的组件名
}
APP.vue 文件中加入router-link to=“path的路径”，点击就会跳转到那个页面
子路由的写法
不要忘记import 组件
主路由下的componet 变成componets:[
{path:'主路由路径',componet:主路由组件}，
{path:'子路由路径1‘,componet:子路由组件1}，
{path:'子路由路径2',componet:子路由组件2}，
]
路由传参
name传参 路由配置中的name 可以在该组件中庸$route.name获得
通过router-link to传参
to前面需要加：。
后面跟的事一个对象形式的字符串
：to="{name:xxx,params:{key:value}}"
name就是配置文件中的name值
params就是我们要传的参数 可以是多个值
通过$route.params.key来获取
单页面多路由区域
一个页面有多个router-view 区域
router-view中定义好name
路由配置文件中
path:路径
componets:{
default:组件名，
定义好的name:组件名1，
定义好的name:组件名2，
}
App.vue 配置好router-link
可以实现单页面多个路由区域
路由传参
路由配置文件中
冒号的形式传参
path:'/home/:id/:userName'
router-link 中 to="/home/2565/name" 可以直接传参
$route.params.id可以获取参数
正则在url中可以规定参数的格式
path:'/home/:id(\\d+)/:userName'
规定id只能是数字
路由重定向
path:'和to一致的路径点击后url会有变化'，
redirect:'已经引入和配置的组件路径'
以上path的url会指向redirect的页面
重定向传参一样的在url中冒号的形式
别名
alias
path:'url',（path为/时别名不起作用）
componet:'组件页面'
alias:'/holly'
点击跳转到holly路径 还是显示path路径的那个页面
重定向和别名的区别
重定向没变化
别名url有变化
404页面
path:'*'
componet:Error
路径错误时会进入Error组件页面
前进后退
this.$router.go(1) 和 this.$router.go(-1)
放在methods中的函数里 然后@click=该函数名
