结构.png
一、简单介绍Vue Router是vuejs官方的路由管理器，是学习vue的必备技能，利用vue-router，可以轻松构建单页应用。本文所有内容，均是自我总结，如有错误敬请指正。
二、基本使用 1.开始(1)安装vue-router包
npm install --save vue-router
(2)定义路由
创建route.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './Home'
import Hello from './Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/', // 访问的路径
name: 'Home',
component: Home // 视图对应的组件
}, {
path: 'hello',
name: 'Hello',
component: Hello
}
]
})
(3)注册
在main.js中
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render: h => h(App)
}).$mount('#app')
此时，启动项目访问根路径，既能打开Home组件内容。
2.两种使用方式（1）声明式导航
<router-link to="/hello">打开Hello</router-link>
<router-link>组件默认会在页面生成一个a标签，点击会跳转到to属性对应的地址。也可以写成如下形式：
<router-link :to="path">打开Hello</router-link>
<router-link :to="{path: '/hello'}">打开Hello</router-link>
<router-link :to="{name: 'Hello'}">打开Hello</router-link>
<router-link>所有属性及说明
属性 说明 to(必须)目标路由地址。
replace替换当前路由，在历史记录栈中，用当前路由地址替换上一个路由地址。
append目标路由地址为相对路径时有效，添加该属性，则在当前路径前添加基路径。
tag默认值："a"，router-link组件渲染在页面上的标签名称。
active-class默认值："router-link-activve"，链接激活时使用的css类名。
exact精确匹配router-link是否为激活状态，不添加时，例如：访问'a/b/c'时，'a','a/b'对应的router-link也为激活状态，添加exact属性后，'a','a/b'则不会激活。
exact-active-class默认值：'router-link-exact-active'，router-link处于激活状态时的class类名。
event默认值：'click'，声明触发导航的事件
(2)编程式导航
路由跳转还可以通过router的实例方法实现，常用的方法有
push()
,
replace()
,
go()
，使用如下：
router.push('/hello')
router.push({name: 'Hello'})
router.push({path: '/hello'})
router.replace('/hello')
router.replace({name: 'Hello'})
router.replace({path: '/hello'})
router.go(1) // 前进一步
router.go(-1) // 后退一步
push()
和
replace()
使用方法基本一致，唯一区别在于push()是往历史记录栈后插入一条新的记录，而replace()是替换当前记录，不会改变历史记录栈长度。使用
go()
方法时，如果传入的参数，超出当前历史记录栈范围，则不会发生跳转。
需要注意的是，在使用
router.push({path: '', params: {}})
形式时，参数将无法传递，params会被忽略，具体传参方式，在后面的路由传参部分会详细介绍。
3.嵌套路由当页面变得相对复杂，出现了多级视图组件嵌套时，会使用到嵌套路由，也就是在<router-view>中包含<router-view>。
router.js
routes: [{
path: '/',
name: 'Home',
component: Home,
children: [{
path: '/about',
name: 'About',
component: About,
}]
}, {
path: '/about/a',
name: 'a',
component: a
}]
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
Home.vue
<template>
<div class="">
<div>home</div>
<router-view></router-view>
</div>
</template>
效果：
在router.js中，
/about
地址匹配的是Home的子路由，
/about/a
匹配的是最外层的路由，所以访问
localhost:8080/#/about
会在Home中的<router-view>渲染组件，而访问
localhost:8080/#/about/a
会在App中的<router-view>渲染组件。
4.路由传参四种传参方式：
(1)直接拼接在访问路径上
router.js
routes: [
{
path: '/about/:id',
name: 'About',
component: About,
}
]
About.vue
<template>
<div class="">参数为：{{$route.params.id}}</div>
</template>
效果：
说明：访问地址为
localhost:8080/#/about/1
，其中/1就是匹配路径上的id，在页面组件中，通过访问
$route.params
可以取到参数id为1。
这种方式，会使组件和路由高度耦合，可以通过设置props属性解耦，使用更为灵活。
router.js
routes: [
{
path: '/about/:id',
name: 'About',
component: About,
props: true // 设置为true
}
]
About.vue
<template>
<div class="">参数id：{{id}}</div>
</template>
<script>
export default {
props: {
id: {
default: ''
}
}
}
</script>
(2) 通过?和&符号拼接在访问路径上
router.js
routes: [
{
path: '/about',
name: 'About',
component: About,
}
]
About.vue
<template>
<div class="">参数为：{{$route.query}}</div>
</template>
效果：
说明：访问地址
localhost:8080/#/about?id=1&name=abc
时，可以在页面组件中通过
$route.query
获取到参数对象。
(3)通过router实例方法传递参数
router.js
routes: [
{
path: '/about',
name: 'About',
component: About,
}
]
About.vue
<template>
<div class="">参数为：{{$route.params}}</div>
</template>
Home.vue
<template>
<div class="">
<div>home</div>
<router-link :to="{name: 'About', params: {a: 1, b: 2}}">跳转到About</router-link>
<div @click="$router.push({name: 'About', params: {c: 3, d: 4}})">点我也可以跳转</div>
</div>
</template>
说明：
①这里目标路由地址必须用name属性，如果使用path属性，在页面组件中无法获取到这里的params对象。
②这种方式传参，页面刷新后，无法获取params（,,ԾㅂԾ,,）。
(4)配置路由时，设置meta属性
这种方式，通常用来设置全局展示的内容，比如设置不同页面的title属性。
router.js
routes: [{
path: '/',
name: 'Home',
component: Home,
meta: {
id: '1'
}
}, {
path: '/about',
name: 'About',
component: About,
meta: {
id: '2'
}
}]
App.vue
<template>
<div id="app">
当前路由id：{{$route.meta.id}}
<router-view></router-view>
</div>
</template>
说明：访问
localhost:8080/#/
时，
$route.meta.id
为1，访问
localhost:8080/#/about
时，
$route.meta.id
为2。
5.重定向与别名(1)重定向
router.j
routes: [
{
path: '/about',
name: 'About',
component: About,
}, {
path: '/other',
redirect: '/about'
}
]
说明：此时访问
localhost:8080/#/other
会被重定向到
localhost:8080/#/about
路径。
redirect也可以是一个对象
{
path: '/other',
redirect: {name: 'About'}
}
(2)别名
重定向是当
/a
被重定向到
/b
时，主动访问
/a
时，浏览器会自动跳转到
/b
，而别名是当
/a
的别名为
/b
时，主动访问
/b
时，浏览器不会发生跳转，但是看到的内容时
/a
的内容，浏览器地址还是
/b
。
routes: [
{ path: '/a', component: A, alias: '/b' }
]
关注微信公众号，精彩干货享不停