VueRouter-编程式导航
背景
`<router-link>`是在用户点击的情况下进行页面更新，但是有时候，我们想要在`js`中手动的修改页面的跳转，此时就需要“编程式导航”了。
方法
有三种方法：
1、`this.$router.push`：转到下一个`url`，会把新传入的url添加到浏览器的`history`中。
push的参数：
1）字符串：直接就是路径
this.$router.push("/post")
2）对象：path和name都可以，但是使用`path`时，参数必须添加到`path`中，放到`params`中无效。
// 传递对象
// this.$router.push({path:"/profile/Xsan"})
this.$router.push({
name: "myprofile",
params: {
userID: "Xsan"
}
})
2、`this.$router.replace`：跟`push`一样,只不过是直接替换当前页面，不会添加到浏览器的`history`中。
let currentPath = this.$route.fullPath
this.$router.replace({
path: "/login",
query: {
from: currentPath
}
})
3、`this.$router.go`：传递的是步数，正数为下一步，负数为上一步。
// 下一步
gotoNext() {
this.$router.go(1)
},
// 上一步
gotoPrevent() {
this.$router.go(-1)
}
整体代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>VueRouter-编程式导航</title> </head> <body> <div id="app"> <button @click="gotoPost">帖子列表</button> <button @click="gotoProfile">个人中心</button> <button @click="gotoLogin">登录</button> <button @click="gotoNext">上一步</button> <button @click="gotoPrevent">下一步</button> <router-view></router-view> </div> <script> var post = Vue.extend({ template: "<h1>帖子列表</h1>" }) var profile = Vue.extend({ template: "<h1>个人中心：{{$route.params.userID}}</h1>" }) var login = Vue.extend({ template: "<h1>登录：{{$route.query}}</h1>" }) let router = new VueRouter({ routes: [{ path: "/post", component: post }, { path: "/profile/:userID", component: profile, name: "myprofile" }, { path: "/login", component: login }] }) new Vue({ el: "#app", router, methods: { gotoPost() { this.$router.push("/post") }, gotoProfile() { // 直接传递字符串 // this.$router.push("/profile/Xsan") // 传递对象 // this.$router.push({path:"/profile/Xsan"}) this.$router.push({ name: "myprofile", params: { userID: "Xsan" } }) }, // 如果要传参则，将要传递的值以键值对的形式通过query传递 gotoLogin() { let currentPath = this.$route.fullPath // this.$router.push({ // path: "/login", // query: { // from: currentPath // } // }) // 或者使用replace，但是replace不会将本次跳转记录到`history`中 this.$router.replace({ path: "/login", query: { from: currentPath } }) }, gotoNext() { this.$router.go(1) }, gotoPrevent() { this.$router.go(-1) } } }) </script> </body> </html>
