文档章节

vueRouter-编程式的导航

tianyawhl
 tianyawhl
发布于 2017/09/12 10:18
字数 465
阅读 8
收藏 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
粉丝 1
博文 200
码字总数 98515
作品 0
常州
前端工程师
VueRouter 源码深度解析

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

夕阳
07/27
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-router 基本使用

 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => a...

为了美好的明天
05/01
0
0
自定义vue全局组件use使用

自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件:Vue.use(VueRouter)、Vue.use(Mint)等等。其实使用的这些都是全剧组件,这里我们就来讲解一下怎么样定义一个...

不负好时光
07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

golang使用protobuf简易教程

参考文档:https://blog.csdn.net/qq_15437667/article/details/78425151 一、安装protobuf # 去github.com/golang/protobuf下载源码包,# 拷贝到 $GOPATH/src/github.com/golang/protobuf......

科陆李明
30分钟前
0
0
8月16日 上课截图

小丑鱼00
45分钟前
0
0
Nginx负载均衡、配置SSL

Nginx负载均衡 在 /usr/local/nginx/conf/vhost/ 下创建一个文件,写入以下内容 加载后用curl测试可以访问设置的网站 www.qq.com ssl原理 HTTPS是一种加密的http协议,如果HTTP通信的数据包在...

黄昏残影
49分钟前
0
0
String 源码阅读笔记

String源码阅读 本人学习笔记,内容来自于阅读源码和其他博客,水平有限,如有错误,烦请指正。 详情参考: Java 7 源码学习系列(一)——String 请别再拿“String s = new String("xyz");...

等到烟火清凉_
49分钟前
4
0
Coding and Paper Letter(十二)

资源整理。<!-- more --> 1 Coding: 1.R语言生成的ppt,GeoStat2018会议报告,时空模式分析的报告。 geostat18 2.欧空局哨兵和SMOS的工具集,关于对地观测数据的处理与分析的docker容器。 ...

胖胖雕
50分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部