除了通过属于声明式导航的<router-link>来实现页面切换，为了我们更方便地在项目中开发导航功能，Vue提供了编程式导航，也就是利用JavsScript代码来实现地址的跳转，通过router实例方法来实现。
1.router.push()
使用router.push()方法可以导航到不同的URL地址。
这个方法会向history栈添加一条新的记录，当用户单击浏览器后退按钮时，可以回到之前的URL。
在单击<router-link>时，router.push()方法会在内部调用，也就是说，单击”<route-link:to=’…’>” 等同于调用router.push(…)方法。
router.push()方法的参数可以是一个字符串路径，或者是一个描述路径的对象。
Vue
//获取router实例
var router = new VueRouter()
//字符串形式
router.push('user')
//对象形式
router.push({ path: '/login?url=' + this.$route.path })
//命名路由
router.path({ name: 'user', params: { userId: 123 } })
//带查询参数
router.push({ path: 'user', query: { id: '1' } })在参数对象中，如果提供了path,params会被忽略，为了传参数，需要提供路由的name或者手写带有参数的path
Vue
//这里的params不生效
router.push({ path: 'user', query: { id: '1' } })
//params生效
const userId = '123'
router.push({ name: 'user', params: { userId } })
router.push({ path: '/user/${userId}' })1.1query传参
Vue
<div id="app">
<button @click="goStart">跳转</button>
<router-view />
</div>
<template>
<p>用户名：{{ this.$route.query.name }}</p>
</template>
import user from '@/components/user.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/user', component: user }
]
})
export default {
methods: {
goStart() {
this.$router.push({ path: '/user', query: { name: 'admin' } })
}
}
}1.2 params传参
Vue
<div id="app">
<button @click="goStart">跳转</button>
<router-view />
</div>
export default new Router({
routes: [
{ path: '/user', component: user, name: 'user' }
]
})
<script>
export default {
methods: {
goStart() {
this.$router.push({ path: 'user', params: { name: 'admin' } })
}
}
}
</script>2.router.replace()
route.replace()方法和router.push()方法类似，区别在于，为<router-link>设置replace属性后，当单击时，就会调用router.replace(),导航后不会向history栈添加新的记录，而是替换当前的history记录。
Vue
<!-- 声明式 -->
<router-link :to="{ path: 'user' }" replace></router-link>
//编程式
vueRoute.replace({ path: 'user' })3.router.go()
router.go()方法的参数是一个整数，表示在histroy历史记录中前进或后退多少步，类似于window.history.go()。this.$router.go(-1)相当于history.back()，表示前进一步，功能类似于浏览器上的后退和前进按钮，相应的地址栏也会发生改变。
Vue
<template>
<div id="app">
<button @click="goBack">后退</button>
<router-view />
</div>
</template>
<script>
import VueRouter from 'vue-router';
var router = new VueRouter()
var vm = new Vue({
el: '#app',
methods: {
goBack() {
this.$router.go(-1)
}
},
router
})
</script>