Vue Router 编程式导航

最新推荐文章于 2024-04-28 18:07:13 发布

qq_40201996

最新推荐文章于 2024-04-28 18:07:13 发布

阅读量521

点赞数 1

分类专栏： vue-router 文章标签：个人学习

本文链接：https://blog.csdn.net/qq_40201996/article/details/81032470

版权

vue-router 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开始学 Vue Router 的时候，

最常用到的便是使用路由组件 <router-link> :

 <router-link to="..."></router-link>

然后使用 <router-view> 作为路由内容的输出：

<router-view></router-view>

然而除了使用 <router-link> 之外，Vue Router 还为我们提供了一些方法：

router.push (location, onComplete?, onAbort?) 

router.replace (location, onComplete?, onAbort?)

router.go(n)

router.push

跳转到对应路由页面，可通过浏览器的后退按钮后退到上一层。

router.replace

跳转到对应路由页面并替换掉原来的路径，不可后退至上一层

router.go(n)

跳转到第 n 层，如果 n 是负数，则后退 n 层，正数则前进 n 层。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编程式导航</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <style>
        button,
        .router-link{
            padding: 10px 15px;
            border: none;
            outline: none;
            font-size: 20px;
            color: #fff;
            /*background: linear-gradient(to right, blue, red, green);*/
            background-color: #000;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--最初的 router-link 模式-->
        <router-link class="router-link" to="/path/RouterLink">原始路由</router-link>

        <!--使用 router.push 方法-->
        <button type="button" οnclick="routerPush()">router.push 方法</button>

        <!--使用 router.replace 方法-->
        <button type="button" οnclick="routerReplace()">router.replace 方法</button>

        <!--使用 router.go 方法-->
        <button type="button" οnclick="routerGo()">router.go 方法</button>

        <router-view></router-view>
    </div>


<script>
    /**
     *    创建一个路由组件  用于输出内容 
     */
    const view = {
        template: "<div>" +
                        "<h1>我点击的是  {{$route.params.msg}}</h1>" +
                    "</div>"
    }

    /**
     *    定义路由
     */
    const routes = [
        {
            path: '/path/:msg',
            component: view
        }
    ]

    /**
     *    创建路由实例
     */
    const router = new VueRouter({
        routes
    })

    const app = new Vue({
        router
    }).$mount("#app")
    
    /**
     *    使用 router.push 替换 <router-link to="xxx"></router-link> 
     *    可点击浏览器后退按钮后退至上一步
     */
    function routerPush() {
        router.push({
            path: "/path/routerPush"
        })
    }
           
    /**
     *    使用 router.replace 替换 <router-link to="xxx"></router-link>
     *    不可后退
     */                 
    function routerReplace() {
        router.replace({
            path: "/path/routerReplace"
        })
    }
    
    /**
     *    router.go(n),接收一个整数，如果为正数则 前进 n 步，负则后退 n 步
     */
    function routerGo() {
        router.go(-1)
    }

</script>
</body>
</html>

同时，也可以在Vue实例里面调用，例如：

    const app = new Vue({
        router,
        methods:{
            vueFn: function () {
                this.$router.push({
                    path: "/path/routerPush"
                })
            }
        }
    }).$mount("#app")

2018-07-13

link_vue-router学习

qq_40201996

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue Router 编程式导航

开始学 Vue Router 的时候，最常用到的便是使用路由组件 &lt;router-link&gt; : &lt;router-link to="..."&gt;&lt;/router-link&gt;然后使用 &lt;router-view&gt; 作为路由内容的输出：&lt;router-view&gt;&lt;/router-view&gt; 然而除了使用 &lt;route
复制链接

扫一扫