Vue Router 是 Vue.js 官方的路由管理器。
它和 Vue.js 的核心深度集成，让构建==单页面应用==变得易如反掌。
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为
(1)初始化项目选择安装vue-router
Install vue-router? (Y/n) y
(2)手动安装
npm i vue-router --save
在/src/main.js中编写程序代码
第一步：引入vue-router插件
import VueRouter from ‘vue-router‘
第二步：vue使用vue-router
Vue.use(VueRouter)
vue使用vue-router，此时vue实例上会增加$route和$router两个配置选项，但是内容是undefined
第三步：引入需要使用的页面组件
import vIndex from ‘./components/Index‘ import vOrder from ‘./components/Order‘
第四步：实例化vuerouter并设置路由映射表关系
var router = new VueRouter({
//定义路由映射配置表
routes:[
{ path:‘/index‘,component:vIndex },
{ path:‘/order‘,component:vOrder }
]
})
第五步：在vue实例上增加一个router配置选项
new Vue({
el: ‘#app‘,
components: { App },
// router:router,
router,
template: ‘<App/>‘
})
第六步：在App.vue中添加路由出口
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
router-link
它会生成一个a标签，需要添加一个to属性，属性值是path属性的内容
非必要属性active-class，设置激活状态的类名
active-class 模糊匹配
exact-active-class 精确匹配
<router-link to="/index" active-class="active">首页</router-link> <router-link to="/order" active-class="active">订单</router-link>
$router
push 把已访问的路由规则添加到历史记录中，并跳转页面
replace 把指定的路由规则替换到已访问的历史记录中，并跳转页面
go(-1) 回退
【/index，/order】 push ->order 【/index，/music】 replace ->music
{ path:‘*‘,redirect:‘/重定向目标路由规则‘ }
星号是通配符，表示没有匹配到任何一个路由规则
redirect属性的内容是path属性的属性值，只有加上了redirect属性，当访问一个不存在的路由规则时，浏览器地址重新定向到指定的路由规则地址上。
(1)创建几个页面组件
(2)在原有的一级路由规则上添加一个children属性，作为它的子级路由规则
export default new Router({
//定义路由映射配置表
routes: [
{
// 一级路由规则要以斜杠开头
path: ‘/index‘,
component: Index,
children:[
// 二级路由规则，不需要写斜杠
{ path:‘food‘,component:Food },
{ path:‘movie‘,component:Movie }
]
},
{ path: ‘/order‘, component: Order },
{ path:‘/music‘,component:Music },
{ path:‘*‘,redirect:‘/index‘ }
]
})
(3)在一级路由规则对应的页面组件中要有路由出口
<div class="index">
<!-- 二级路由导航，to属性必须要把一级路由规则和二级路由规则都补全 -->
<router-link to="/index/food">美食</router-link>
<router-link to="/index/movie">电影</router-link>
<router-view></router-view>
</div>
①创建一个用户详情页面组件
②定义一个动态路由规则，指向用户详情页面组件
/src/router/index.js
{ path:‘user/:uid‘,component:UserInfo }
③在用户表格页面点击编辑按钮进行页面跳转
<button @click="toInfo(useritem.id)" class="btn btn-primary">编辑</button>
?
methods:{
toInfo(uid){
this.$router.push(‘/user/‘+uid)
}
}
④在用户详情页面获取路由参数
<p>编号：{{ $route.params.uid }}</p>
当路由中参数数量不固定时，可以使用查询参数方式
==查询参数和动态路由不能混用==
①设置一个固定路由规则
{path:‘user/info‘,component:UserInfo}
②在用户表格页面跳转时使用qs插件
<script>
import qs from ‘qs‘
export default {
methods:{
toInfo(uid){
// 通过$router进行页面跳转
// this.$router.push(‘/user/‘+uid.id+‘/‘+uid.phone)
this.$router.push(‘/user/info?‘+qs.stringify(uid))
}
}
}
</script>
③在用户详情页面获取路由参数
<p>编号：{{ $route.query.id }}</p>
<p>手机号：{{ $route.query.phone }}</p>
<p>姓名：{{ $route.query.name }}</p>
hash，默认模式，在浏览器地址中有#，#号后面的内容会被解析成路由规则，当路由规则变化时，不会重新发起网络请求
history，在浏览器地址中没有#，利用html5中的historyApi进行页面跳转。打包的项目，部署上线时，需要后端配置web服务器的转发规则，不然会出现404。
在定义路由规则时，可以给指定的路由规则设置一个name属性
// { path:‘user/:uid/:phone‘,component:UserInfo },
{
path:‘user/info‘,
component:UserInfo,
name:‘xiangqing‘
}
在进行页面跳转时，可以使用name属性作为路由的标识
export default {
methods:{
toInfo(uid){
// 通过$router进行页面跳转
// this.$router.push(‘/user/info?‘+qs.stringify(uid))
this.$router.push({
name:‘xiangqing‘,
query:uid
})
}
}
}
</script>
alias
{
path:‘/login‘,
component:Login,
alias:‘/denglu‘
}
别名设置好之后，原来的路由规则和别名都可以访问。
原文：https://www.cnblogs.com/hxmw/p/14263779.html