文档章节

vueRouter-编程式的导航

tianyawhl
 tianyawhl
发布于 2017/09/12 10:18
字数 465
阅读 12
收藏 0

除了使用<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>

 

© 著作权归作者所有

共有 人打赏支持
tianyawhl
粉丝 3
博文 225
码字总数 114742
作品 0
常州
前端工程师
私信 提问
VueRouter 源码深度解析

该文章内容节选自团队的开源项目 InterviewMap。项目目前内容包含了 JS、网络、浏览器相关、性能优化、安全、框架、Git、数据结构、算法等内容,无论是基础还是进阶,亦或是源码解读,你都能...

夕阳
10/28
0
0
详解vue-router 初始化时做了什么

vue router 的初始化使用步骤 我们首先来看 vue-router 的使用步骤,然后再分别去看各个步骤都发生了什么。 使用 vue-router 需要经过一下几个步骤: 引入 vue-router: 利用 vue 的插件机制...

peakedness丶
11/20
0
0
vue-router源码阅读学习

如同分析vuex源码我们首先通过一个简单例子进行了解vue-router是如何使用的,然后在分析在源码中是如何实现的 示例 下面示例来自于example/basica/app.js 首先调用Vue.use(VueRouter),Vue.us...

B_Cornelius
02/06
0
0
解密vue-router: 从源码开始

前几天笔者看到一个问题:你真的了解vue-router的吗?你知道vue-router的运行原理吗?抱着这样的问题,笔者开始了vue-router的源码探索之旅。本文并没有逐行去深究源码,而是跟着笔者画的流程...

玩弄心里的鬼
05/08
0
0
Vue中路由管理器Vue Router使用方式(一)

一、在模块编程中安装VueRouter 1.Npm安装vue-router 2.在main.js中引用并使用VueRouter 3.定义路由,创建路由实例 4.注册路由实例 二、Vue Router基础使用示例 1.App.vue 页面定义,使用rou...

tianma3798
10/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

slot分发内容

slot元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。 有 name 特性的 slot 称为具名 slot。 有 slot 特性的内容将分发到名字相匹配的具名 slot。 内容分发就是指混合父组件的内...

Carbenson
6分钟前
0
0
python开发入门

1.执行python文件 # python ./demo.py 2.Python ImportError: No module named 'requests'异常 解决方法: # pip install requests;...

硅谷课堂
7分钟前
0
0
官宣,PyTorch 1.0 稳定版本现已推出

简评:快来一起快乐地学习吧。 随着 PyTorch 生态系统和社区继续为开发人员提供有趣的新项目和教育资源,今天(12 月 7日)在 NeurIPS 会议上发布了 PyTorch 1.0 稳定版。研究人员和工程师现...

极光推送
21分钟前
0
0
对比理解adr,ldr指令

很多人在写简单的裸机代码或分析uboot时,常常遇到adr ldr指令。却分不清这2者的区别,今天就来谈谈adr与ldr指令。 参照韦老师的代码和Makefile写了test_adr.S: .text .globl _start _start...

天王盖地虎626
31分钟前
2
0
将spring boot 项目注册为Linux的服务

springboot 注册为Linux系统服务 springboot 注册为Linux系统服务

miaojiangmin
33分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部