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>