跳转路由
vue路由文件router.js
export default new Router({
routes: [{
name: 'survey',
path: '/service/surveyService',
component: 'surveySeriveTips'
}]
})
在vue文件中使用路由：
this.$router.push({name: 'survey'})或this.$router.push('/service/surveyService')
第一种方式我们可以看到name是给路由命名，设置的name要唯一，表示路由的名称，使用name之后就会匹配path中的路由，渲染对应的组件，目的是方便使用，因为有的路由比较长。
第二种方式是直接匹配path中的路由，渲染对应的组件
通过路由传参
this.$router.push({name: 'survey', query: {add: 123}})或
this.$router.push({path: '/service/surveyService', query: {add: 123}})
以上使用name或path都可以。
动态路由
我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件。例如，我们有一个user组件，对于所有id各不相同的用户，都要使用这个组件来渲染。那么我们可以在vue-router的路由路径中使用"动态路径参数"来达到这个效果：
const router = new VueRouter({
routes: [
{
path: '/user/:idName',
component: user
}
]
})
现在呢，像vue模块中跳转路由this.router.push('user/bar')这两个路由都会被path: 'user/:id'这种模式匹配，然后都会使用user组件来渲染。在user组件可以用this.router.push('user/foo')匹配到的idName就是foo。这个动态路由可以用上述路由传参的方式来替换，两者效果一样。
响应路由参数的变化
提醒一下，当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地watch(监测变化)$route对象：
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
或使用beforeRouteUpdate导航守卫：
beforeRouteUpdate (to, from, next) {
//
}
捕获所有路由或404Not found路由
常规参数只会匹配被/分隔的URL片段中的字符。如果想匹配任意路径，我们可以使用通配符(*)：
{
// 会匹配所有路径
path: '*'
}
{
// 会匹配以'/user-'开头的任意路径
path: 'user-*'
}
当使用通配符路由时，请确保路由的顺序是正确的，也就是说含有通配符的路由应该放在最后。路由{path: '*'}通常用于客户端404错误。如果你使用了History模式，请确保正确配置你的服务器。
当使用一个通配符时，$rote.params内会自动添加一个名为pathMath参数。它包含了URL通过通配符被匹配的部分：
vue.js：
(1)
this.$router.push('/non-existing')
// 没有找到对应的组件就会被通配符匹配到
(2)
this.$router.push('user-admin')
// 只要是user-的路由都会被匹配到
route.js：
(1)
{
path: '*',
component: 'default/404.vue'
}
(2)
path: 'user-*',
component: 'ck/user.vue'
}
注意：首先通配符需要放在最后，用来匹配上面没有匹配到的路由，不管是动态路由还是通配符都是vue中写具体路由，route.js中写匹配路由。
匹配优先级
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级高。
嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL中各段动态路径也按某种结构对应嵌套的各层组件。
const user = {
template: `
user {{$route.params.id}}
要在嵌套的出口中渲染组件，需要在VueRouter的参数中使用chuildren配置：
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 中
path: 'posts',
component: UserPosts
}
]
}
]
})
要注意，以/开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。
你会发现，children配置就是像routes配置路由一样配置成数组，所以呢你可以嵌套多层路由。此时，基于上面的配置，当你访问/user/foo时，user的出口(内嵌的
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 中
{ path: '', component: UserHome },
// ...其他子路由
{ path: 'access', component: UserAccess },
]
}
]
})
编程式的导航
除了使用
router.push(location, onComplete?, onAbort?)
注意：在Vue实例内部，你可以通过router.push。
想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以当用户点击浏览器后退按钮时，则回到之前的URL。
当你点击
// 声明式
// 编程式
router.push(...)
该方法的参数可以式一个字符串路径或者一个描述地址的对象。例如：
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
router.push({ name: 'home' })
如果要给路由添加参数可以在对象中添加params或query，这两个属性都是router实例提供的。但是它们也是有区别的：
// 使用name
router.push({ name: 'user', params: { userId: '123' }}) // localhost:3000/#/user
router.push({ name: 'user', query: { userId: '123' }}) // localhost:3000/#/user?userId=123
// 使用path
router.push({ path: 'user', params: { userId: '123' }}) // localhost:3000/#/user
router.push({ path: 'user', query: { userId: '123' }}) // localhost:3000/#/user?userId=123
上述代码我们可以看出使用params属性跳转路由之后，url上不显示添加的参数，使用query才会显示添加的参数，如果使用path那么params属性会被忽略，并且this.$route.params获取不到信息，query不受影响。同样的规则也适用于router-link组件的to属性。
router.replace()
跟router.push很像，唯一的不同就是，它不会向history添加新纪录，而是跟它的方法名一样---替换掉当前history记录。
// 声明式
// 编程式
router.replace(...)
router.go(n)
这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)。
操作history
你也许注意到
router.push、 router.replace 和 router.go 跟 window.history.pushState、window.history.replaceState 和 window.history.go好像， 实际上它们确实是效仿 window.history API 的。
还有值得提及的，Vue Router 的导航方法 (push、 replace、 go) 在各类路由模式 (history、 hash 和 abstract) 下表现一致。