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: }})
}
}
  • 传入地址键值对

methods:{
toURL(){
this.$router.push({ name: 'demo2', params: { userId: }, query: { plan: 'private' } })
}
}

Vue路由实现页面跳转的两种方式(router-link和JS)的更多相关文章

  1. js实现页面跳转的两种方式

      CreateTime--2017年8月24日08:13:52Author:Marydon js实现页面跳转的两种方式 方式一: window.location.href = url 说明:我们常用 ...

  2. vue 路由传参 params 与 query两种方式的区别

    初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  router文件下index.js里面,是这么定义路由的: { p ...

  3. Servlet页面跳转的两种方式

    一.页面跳转 1. 请求转发: (1) 使用requestDispatcher对象: 转发格式:request.getRequestDispatcher("path").forwa ...

  4. web项目中实现页面跳转的两种方式

    <a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> ...

  5. vue 页面跳转的两种方式

    1,标签跳转     <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点 ...

  6. web页面跳转的几种方式

    可用客户端触发或服务端触发的方式来实现页面跳转. 客户端触发 方式一:使用Javascript 利用window.location对象的href属性.assign()方法或replace()方法来实现 ...

  7. 实现网页页面跳转的几种方法(meta标签、js实现、php实现)

    1.meta标签实现 只需在head里加上下面这一句就行了,在当前页面停留0.1秒后跳转到目标页面  代码如下 复制代码 1 <meta http-equiv="refresh&quo ...

  8. jquery/js/a标签实现当前页面跳转的两种方法

    在逛购物网站首页时经常看到侧边导航栏,当我们点击导航栏中某一项时会跳转到当前页面的某一处 有两种方法实现,一种是利用js计算好各位置的高度,通过绑定事件使页面跳转到指定位置,另一种是利用a标签进行当前 ...

  9. 微信小程序页面跳转的三种方式总结

    原文链接 https://blog.csdn.net/zgmu/article/details/72123329 首先我们了解到,小程序规定页面路径只能有五层,所以我们尽量避免多层级的页面跳转 页面跳 ...

随机推荐

  1. 并行执行任务 Stat-Job

    最近在写一些powershell脚本时候遇到一个问题,那就是要解压十几个zip文件,这样仅执行完解压操作差不多5min的时间就过去了,严重影响了效率,这时就想到了使用多线程的方法来执行这个解压操作,经 ...

  2. harbor的安装和简单使用【h】

    安装docker的私有仓库, 利用vmware提供的harbor工具, 参考Docker 私有仓库方案比较与搭建, Harbor安装 -- 企业级Registry仓库 2.2harborProject ...

  3. consul多数据中心搭建 【h】

    自建IDC后面简称own.阿里云机房ali.腾讯云机房txown机房:内网10.10.10.0/24,边界节点,10.10.10.100/101.xxx.80.xxxali机房:内网10.10.10. ...

  4. Redis 主从配置密码以及哨兵

    目录: Redis 主从介绍 哨兵机制 Redis 主从配置 环境 安装 启动服务 检查主从状态 测试数据同步 默认是读写分离的 Redis Sentinel 配置 主Redis宕机测试 配置多个哨兵 ...

  5. Oracle spatial空间查询的选择度分析

    在上一篇中,我用一个案例演示了对于数值或字符串类型的字段,选择度的计算方法.并证明了当字段值的选择度不同时,将会影响CBO选择最终的执行计划.对于可排序的字段类型,选择度计算模型已经有很多人写博客介绍 ...

  6. 在ensp上配置Trunk接口

    什么是Trunk接口? 在以太网中,通过划分 VLAN 来隔离广播域和增强网络通信的安全性.以太网通常由多台交换机组成,为了使 VLAN 的数据帧跨越多台交换机传递,交换机之间互连的链路需要设置为干道 ...

  7. js 获取服务端时间,并实现时钟

    本例子以vue语法伪代码书写: 1,获取服务端北京时间 getRealTime() { let that = this; var xhr = new XMLHttpRequest(); if( !xh ...

  8. 为什么Apache Kafka如此受欢迎

    1.目标 今天,在这个Kafka教程中,我们将学习所有Kafka功能,如可扩展性,可靠性,耐用性,这些都说明了Kafka如此受欢迎的原因.我们将详细讨论Kafka的每个功能.但在那之前让我们明白什么是 ...

  9. Django框架深入了解_02(DRF之序列化、反序列化)

    序列化:将Python对象准换成json格式的字符串,反之即为反序列化 DRF的序列化使用过程: 使用drf的序列化组件 -1 新建一个序列化类继承Serializer -2 在类中写要序列化的字段 ...

  10. Python-12-装饰器

    一.定义 器即函数 装饰即修饰,意指为其他函数添加新功能 装饰器定义:本质就是函数,功能是为其他函数添加新功能 原则: 1.不修改被装饰函数的源代码(开放封闭原则) 2.为被装饰函数添加新功能后,不修 ...