Vue路由实现页面跳转的两种方式(router-link和JS)

Vue.js 路由可以通过不同的 URL 访问不同的内容,实现多视图的单页 Web 应用

1、通过 <router-link> 实现

<router-link> 组件用于设置一个导航链接,切换不同 HTML 内容

使用方法:

  • 简单写法
<router-link to="demo2">demo2</router-link>
  • 使用 v-bind 的写法
<router-link :to="'demo2'">demo2</router-link>

<!-- 也可以用{}包裹对应的path或name -->
<router-link :to="{ name: 'demo2' }">demo2</router-link>
  • 传参的写法
<router-link :to="{ name: 'demo2', params: { userId: 123 }}">demo2</router-link>

这里传参需要在 router.js 中对 demo2 的路径进行配置,在 path 中 demo2 后添加通配符 : 和对应的 userId,如下:

{
  path: '/demo2/:userId',
  name: 'demo2',
  component: demo2
},

配置完成后,页面跳转的结果就为 /demo2/123

这里的“123”就是上面的 userId

那么,如何在新页面中获取到传过来的参数 userId 呢?

在 mounted 钩子中使用 this.$route.params.xx. 获取传过来的参数,如下:

mounted () {
    alert(this.$route.params.userId)
}

// 弹出123
  • 传入地址键值对
<router-link :to="{ path: 'demo2', query: { plan: 'private' }}">demo2</router-link>

页面跳转的结果为 /demo2?plan=private

(注意这里不用在 router.js 里配置路径)

在新页面中获取到传过来的地址键值对 plan,可以在 mounted 钩子中使用 this.$route.plan.xx. 获取传过来的地址键值对,如下:

mounted () {
  alert(this.$route.query.plan)
}

// 弹出private

2、通过 JS 实现

template 部分:

<button @click="toURL">跳转页面</button>

script 部分:

(注意这里是 router,上面是 route)

  • 简单写法
methods:{
  toURL(){
    this.$router.push({ path: '/demo2' })
  }
}
  • 传参的写法
methods:{
  toURL(){
    this.$router.push({ name: 'demo2', params: { userId: 123 }})
  }
}
  • 传入地址键值对
methods:{
  toURL(){
    this.$router.push({ name: 'demo2', params: { userId: 123 }, query: { plan: 'private' } })
  }
}

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏三言两语

select标签添加onclick()事件的兼容写法

以上代码片是可以在Firefox和IE9下运行的,但是它在我的360浏览器上就是无效的,究其原因还是IE版本的问题(存在兼容性问题), 也就是:老版本只能这样 ...

87930
来自专栏三言两语

前端快速入门之概述

以下是对(前端)可视化工作的并不系统的总结,新手向,主要是想说一下前端如何组成、功能如何实现、资源如何请求,进而说到数据如何显示,并在最后列举了一些十分重要的参...

8120
来自专栏自然语言处理(NLP)论文速递

《Python入门04》Python字符串的那些“事儿”

前几天收到小伙伴的留言,说你写的python相关教程意义不大,还不如专门整理《NLP》相关文章供大家参考学习,还有小伙伴说你的python入门怎么不更新...

9020
来自专栏架构师进阶

Spring Boot集成CKEditor 顶

项目中需要用到富文本编辑器,朋友推荐用CKEditor。CKEditor可以和Spring mvc很好的集成。CKEditor与CKFinder学习–整合Spr...

12130
来自专栏暴走大数据

Spark Core源码精读计划5 | 事件总线及ListenerBus

在讲解SparkContext组件初始化时,第一个初始化的内部组件就是LiveListenerBus,后面的组件很多都会依赖它,这从侧面说明事件总线是非常重要的...

14030
来自专栏LAMPer 技术栈

七夕将至,我用代码写了一个表白神器!

七夕节马上就要到了,又到了各位单身汪报复社会的时间了。今年的七夕节,各位单身汪们你们准备好了吗?把电影院的单号座位都订完?晚上去宾馆敲门?用针扎TT?这些老掉牙...

43020
来自专栏架构师进阶

基础服务系列-Centos7 安装Node.js10

wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz

10020
来自专栏媒矿工厂

使用开源库构建自定义视频体验

本帖来自VES(Video Engineering Summit)2019的演讲,主要内容是使用开源库构建自定义视频体验(Building A Custom V...

9130
来自专栏暴走大数据

Spark Core源码精读计划6 | AsyncEventQueue与LiveListenerBus

在上一篇文章中,我们了解了Spark事件总线机制的概况,以及ListenerBus、SparkListenerBus的细节。

12030
来自专栏架构师进阶

正则表达式-零宽断言实践

处理JSON字符串KEY值中的特殊字符,VALUE中的字符不受影响。 如下所示,替换KEY中的_DOT_为点.,_SUB_为_。

10510

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励