专栏首页前端之攻略vueRouter-编程式的导航 原

vueRouter-编程式的导航 原

除了使用<router-link>创建a标签来定义导航链接,我们还可以借助router的实例方法,通过编写代码来实现。 router.push(location) 想要导航到不同的url,则使用router.push方法。这个方法会像history栈添加一个新的记录, 所以,当用户点击浏览器后退按钮时,则回到之前的url 当你点击<router-link>时,这个方法会在内部调用,所以说,点击<router-link :to="...">等同于调用 router.push(...) 该方法的参数可以是一个字符串路径,或者一个描述地址的对象,例如: //字符串 router.push("home") //对象 router.push({path:"home"}) 命名的路由 router.push({name:"user",params:{userId:123}}) //带查询参数,变成/register?plan=private router.push({path:'register',query:{plan:'private'}})

router.replace(location) 跟router.push很像,唯一不同就是,它不会像history添加新记录,而是跟它的方法名一样-替换掉当前的history记录 声明<router-link :to="..." replace>    编程式 router.replace(...)

router.go(n) 这个方法的参数是一个整数,意思是在history记录中向前或者后退多少步,类似window.history.go(n) 例子 //在浏览器记录中前进一步,等同于history.forward() router.go(1) //后退一步记录,等同于history.back() router.go(-1) //前进3步记录 router.go(3) //如果history记录不够用,那就默默的失败呗 router.go(-100) router.go(100)

一个简单的例子

<body class="">
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router.js"></script>
    <div id="app">
        <button v-on:click="showHome">显示home</button>
        <button v-on:click="showOther">显示其他</button>
        <router-view></router-view>
    </div>
    <script>
    const Home = {
        template: `<div>this is the home page</div>`
    }
    const Other = {
        template: `<div>this is the other page</div>`
    }
    const router = new VueRouter({
        routes: [
            { path: "/home", component: Home },
            { path: "/other", component: Other },
        ]
    })

    var app = new Vue({
        el: "#app",
        router: router,
        methods: {
            showHome: function() {
                this.$router.push({ path: '/home' })
            },
            showOther: function() {
                this.$router.push({ path: '/other' })
            },
        }
    })
    //router.push({ path: '/home' }) 类似所有出现的/ 不能省略
    //this.$router.push({ path: '/home' }) 也可以写成router.push({ path: '/home' })
    </script>
</body>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vueRouter-Getting Started

    用Vue.js+vue-router创建单页应用是非常简单的。使用Vue.js,我们已经可以通过组合组件来组成应用程序,当你把vue-router添加进来,我们...

    tianyawhl
  • vueRouter-命名视图 原

    有时候想同时展示多个视图,而不是嵌套展示,例如创建一个布局,有sidebar(侧导航)和(主内容)2个视图,这个时候命名视图就派上用场了。 你可以在界面中拥有...

    tianyawhl
  • vueRouter-命名路由 原

    有时候通过一个名称来识别一个路由显得更方便,特别是在链接一个路由,或者是执行一些跳转的时候, 你可以在创建Router实例的时候,在routers配置中为某个...

    tianyawhl
  • vue-router详解——小白速会

    一、概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。 vue的单页面应用是基于路由和组件的,路由用...

    柴小智
  • vue之vue-router实例

    本文转自: https://www.cnblogs.com/SamWeb/p/6610733.html

    开发架构二三事
  • Vue路由router-link的使用

    Dream城堡
  • 前端基础-Vue.js单页应用

    优缺点都很明显,但是我们都还没尝试过就来评价,就会显得空口无凭;接下来我们先来学习制作单页应用,然后再来进行点评;

    cwl_java
  • vue-router基本使用

    大当家
  • Linux下批量ping小工具

    大大大黑白格子
  • R语言学习 - 韦恩图

    韦恩图 韦恩图是用来反映不同集合之间的交集和并集情况的展示图。一般用于展示2-5个集合之间的交并关系。集合数目更多时,将会比较难分辨,更多集合的展示方式一般使用...

    生信宝典

扫码关注云+社区

领取腾讯云代金券