文档章节

vueRouter-编程式的导航

tianyawhl
 tianyawhl
发布于 2017/09/12 10:18
字数 465
阅读 8
收藏 0
点赞 0
评论 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
博文 192
码字总数 88621
作品 0
常州
前端工程师
解密vue-router: 从源码开始

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

玩弄心里的鬼 ⋅ 05/08 ⋅ 0

vue-router 基本使用

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

为了美好的明天 ⋅ 05/01 ⋅ 0

前端路由简介以及vue-router实现原理

后端路由简介 路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样 大致流程可以看成这样: 浏览器发出请求 服务器监听到80端口(或443)有请求过来,并解析url路径 ...

muwoo ⋅ 06/01 ⋅ 0

Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb。在这篇文章中,我会把它如...

笔阁 ⋅ 04/16 ⋅ 0

使用webpack提升vue应用的4种方式

webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。 在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,...

一个敲代码的前端妹子 ⋅ 05/16 ⋅ 0

前端路由探究(1) vue-router源码学习-基本数据结构

搭建实验环境 首先github download下来https://github.com/vuejs/vue-router vue-router最新的代码,代码在src下,结构清晰,但不适合调试看中间的一些处理结果,所以新建一个文件夹,新建i...

Kurset ⋅ 2017/12/09 ⋅ 0

vue router 如何使用params query传参,以及有什么区别

写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题。有需要的朋友可以做一下参考,喜欢的...

OB丶Koro1 ⋅ 2017/11/13 ⋅ 0

vue-router 入门学习

对于单页面应用,尤其是移动端的网页应用,使用标签实现页面切换和跳转会有300ms的延迟,遇到网速慢就会一直加载。所以在SPA应用中,用视图切换来模拟页面的切换 vue-router 是Vue.js官方的路...

frwupeng517 ⋅ 2017/08/05 ⋅ 0

简单介绍一下vue

Vue Vue是用于构建用户界面的渐进框架。作者尤雨熙特别强调它与其他的框架不同,Vue是渐进式的框架,可以逐步采用,不必一下就通过框架去重构项目。 另外Vue的核心库只专注于视图层,这样就更...

汇智网 ⋅ 2017/09/20 ⋅ 0

Vue Demo

环境需求 ( 默认 版本 为 , 需要手动升级到 , 或直接使用 ) 等Web服务器 目录结构 webpack.common.config.babel.js webpack.dev.config.babel.js webpack.prod.config.babel.js // Web访问目...

千一 ⋅ 2016/10/03 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

vue使用mockjs

在使用vue开发的时候,一直疑惑与mockjs怎么用,开了mockjs的开发文档,还是一脸蒙蔽,无从下手!mockjs在前后端分离开发上进行模拟数据,是不可避掉的一环。在网上看了一些博文还有查阅了其...

JamesView ⋅ 20分钟前 ⋅ 0

解决问题的思路

1.相对来说,程序逻辑解决问题的思路应该更加趋向于通过逻辑结构来解决问题,而不是通过更小的类级别和方法级别的改进 2.类级别和方法级别的改进需要的技术能力更高一点

th778899 ⋅ 27分钟前 ⋅ 0

HTTP请求状态及jQuery AJAX请求异常处理

上一周调优一个项目的Js部分,其中一个严重的问题就是在页面初始化数据时,没有对异常进行处理, 导致Loading一直在等待中,无提示无处理。在用户体验上很不好,即使网络条件无法保证,在出错...

临江仙卜算子 ⋅ 27分钟前 ⋅ 0

error code 1874. innodb is in read only mode--报错解决

参考网页 https://zhidao.baidu.com/question/746894876932022292.html https://blog.csdn.net/shushugood/article/details/80226767 问题背景 创建了一个数据库然后想删除,因为自己本机性能......

karma123 ⋅ 28分钟前 ⋅ 0

JVM系列:jinfo命令详解

jinfo全称Java Configuration Info,主要作用是实时查看和调整JVM配置参数。 一.查看JVM参数 用法:jinfo -flag <name> PID 示例: # jinfo -flag MaxMetaspaceSize 11180 # -XX:MaxMetaspac......

Jacktanger ⋅ 33分钟前 ⋅ 0

exportfs命令、NFS客户端问题、FTP介绍、使用vsftpd搭建ftp

1. exportfs命令 一般情况下重启服务器上nfs服务时,需把客户端上的挂载先卸载掉,以免进程后面杀不掉。当客户端服务器很多时,操作起来就比较麻烦。此时可以使用exportfs命令重新加载下。 ...

laoba ⋅ 42分钟前 ⋅ 0

基于Python的信用评分卡模型分析

信用风险计量体系包括主体评级模型和债项评级两部分。主体评级和债项评级均有一系列评级模型组成,其中主体评级模型可用“四张卡”来表示,分别是A卡、B卡、C卡和F卡;债项评级模型通常按照主...

火力全開 ⋅ 43分钟前 ⋅ 0

执行make命令时报错g++: Command not found

执行make命令时报错g++: Command not found 2016年10月24日 12:31:29 阅读数:4366 朋友安装node时遇到的问题 报错截图: 其实很简单只需要安装一下 yum -y install gcc automake autoconf l...

rootliu ⋅ 43分钟前 ⋅ 0

Loongnix(龙芯)系统,优盘安装指南

U盘安装分为两种方式:"usb disk" 及 "usb cd"。其中usb cd是将usb disk做为usb光驱使用。 usb disk安装步骤: 需要准备一个大小超过3.5G的U盘,格式化ext3格式 下载安装光盘镜像xxx.iso,将...

gugudu ⋅ 47分钟前 ⋅ 0

HTML5中meta属性的使用详解

meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。虽然一些网页可能没有使用meta,但是作为正规军,我们还是有必要了解一些meta的属性,并且能...

guorongjin ⋅ 50分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部