专栏首页Web前端开发Vue路由实现页面跳转的两种方式(router-link和JS)

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 条评论
登录 后参与评论

相关文章

  • Koa Cookie 的设置与获取

    刷新 http://localhost:3000/json 自动获取 Cookie:

    Leophen
  • React中的State与Props

    一个组件的显示形态可以由数据状态和外部参数决定,其中,数据状态为 state,外部参数为 props

    Leophen
  • JS Array.of 和 Array.fill 方法

    Leophen
  • GitHub分享新华字典数据集

    中华新华字典数据库和 API 。收录包括 14032 条歇后语,16142 个汉字,264434 个词语,31648 个成语。

    不脱发的程序猿
  • python接口自动化(三十六)-封装与调用--流程类接口关联续集(详解)

      上一篇已经给大家都介绍过了流程类接口关联,但是由于博客的登录机制改变,所以没有办法给小伙伴们实战演练一下,那么这篇就按照上一篇计划的用jenkins来给小...

    北京-宏哥
  • 【笔记】移动端H5数字键盘input type=number的处理(IOS和Android)

    在Vue中的项目,基于VUX-UI开发,一个常见的需求: 1、金额输入框 2、弹出数字键盘 3、仅支持输入两位小数,限制最大11位数,不允许0开头   后续...

    SmileSmith
  • Vue折腾记 - (3)写一个不大靠谱的typeahead组件

    typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的typeahead;

    CRPER
  • Java 中的异常处理机制

    生活中的异常:  不能够完整而顺利的完成一些工作  根据不同的异常进行相应的处理,而不会就此终端我们的生活 引出:   异常处理:   方式:     ...

    房上的猫
  • 应用服务连接命令一览表

    描述:连接到程服务器的远程桌面这是windows最常用的命令,通过rdp协议进行远程主机的管理;

    WeiyiGeek
  • 游戏中的深度学习与人工智能

    本篇文章主要跟大家分享的内容是深度学习在游戏AI中的应用这样一个话题: ? NPC的驱动粗分可以分成低级、中级、高级、特高级,这样几个类别。当然,按照其它的方式...

    刀刀老高

扫码关注云+社区

领取腾讯云代金券