安装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=该函数名