vue中通过路由跳转的三种方式

vue中通过路由跳转的三种方式router-view实现路由内容的地方,引入组件时写到需要引入的地方需要注意的是,使用vue-router控制路由则必须router-view作为容器。通过路由跳转的三种方式1、router-link【实现跳转最简单的方法】<router-linkto=’需要跳转到的页面的路径>浏览器在解析时,将它解析成一个类似于<a>的

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

router-view 实现路由内容的地方,引入组件时写到需要引入的地方
需要注意的是,使用vue-router控制路由则必须router-view作为容器。

通过路由跳转的三种方式


1、router-link 【实现跳转最简单的方法】

  • <router-link to='需要跳转到的页面的路径>
    浏览器在解析时,将它解析成一个类似于<a> 的标签。

2、this.$router.push
常用于路由传参,用法同第三种

区别:

  1. query引入方式

params只能用name来引入路由
而query 要用path引入

  1. query传递方式

类似于我们ajax中get传参,在浏览器地址栏中显示参数
params则类似于post,在浏览器地址栏中不显示参数

举例:

       this.$router.push({
          path: '/rental-list/transfer',
          query: {
            id: this.roleId,
            ids: this.checkList
          }

在跳转的页面,即路径为rental-list/transfer的页面接收参数

let id = this.$route.query.id  //接收id

3、this.$router.replace{path:‘/’ }类似,不再赘述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/157429.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月27日 下午5:36
下一篇 2022年7月27日 下午5:46


相关推荐

  • dfs,bfs入门精讲、、、

    dfs,bfs入门精讲、、、

    2021年9月27日
    71
  • linux抓包查看请求接口源ip,linux 抓包「建议收藏」

    linux抓包查看请求接口源ip,linux 抓包「建议收藏」tcpdumphost172.16.29.40andport4600-X-s500tcpdump采用命令行方式,它的命令格式为:tcpdump[-adeflnNOpqStvx][-c数量][-F文件名][-i网络接口][-r文件名][-ssnaplen][-T类型][-w文件名][表达式]1.tcpdump的选项介绍-a…

    2022年10月14日
    5
  • 2021 idea 激活码_通用破解码

    2021 idea 激活码_通用破解码,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月17日
    102
  • threadid=1: thread exiting with uncaught except…

    threadid=1: thread exiting with uncaught except…

    2021年8月25日
    61
  • Pycharm调试_pycharm 远程调试

    Pycharm调试_pycharm 远程调试动机一些bug由于本地环境和线上环境的不一致可能导致本地无法复现本地依赖和线上依赖版本不一致也可以导致一些问题有时一些bug跟数据相关,本地数据无法和线上数据一致有些三方平台会验证服务器的合法性或者异步回调结果,如微信支付,这时候本地无法测试如上所诉,要是有一个很方便调试远程服务器的方法,岂不美哉。通过PyCharm我们可以很方便地实现远程调试,下面详细介绍下PyCharm这个牛叉的功能。添加远程…

    2025年7月1日
    6
  • Mask RCNN 实战(一)--代码详细解析

    Mask RCNN 实战(一)--代码详细解析MaskRCNN 大家有疑问的请在评论区留言 如果对原理不了解的话 可以花十分钟先看一下我的这篇博文 在来进行实战演练 这篇博文将是让大家对 maskrcnn 进行一个入门 我在后面的博文中会介绍 maskrcnn 如何用于多人关键点检测和多人姿态估计 以及如何利用 maskrcnn 训练自己的数据集 以及 mobile net 版的 maskrcnn ps 我正在做 等做完我会分享到我的 g

    2026年3月17日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号