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>

 

 

posted @ 2020-02-25 17:35  xsan  阅读(172)  评论(0编辑  收藏