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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • visual studio2013卸载教程_数据卸载

    visual studio2013卸载教程_数据卸载VisualStudio在安装过程中可能已在您的计算机上安装了附加组件。必须使用“添加或删除程序”按照下面所列顺序手动卸载这些组件。注意:卸载这些组件可能会影响其他已安装的依赖于这些组件的应用程序。以下组件可能已与VisualStudio一起安装到计算机上:MicrosoftMSDN2005速成版MicrosoftVisualStudio2005Tools…

    2022年9月23日
    0
  • navicat for mysql 激活码【在线注册码/序列号/破解码】

    navicat for mysql 激活码【在线注册码/序列号/破解码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    827
  • input file 的美化

    input file 的美化原文链接:Styling&CustomizingFileInputstheSmartWay(作者:OsvaldasValutis)这份教程主要介绍如何将与配合、以保持语义化+可访问性为目标辅以少量Javascript来美化。实例网上流传过一些“自定义”元素的方法,试验过但都实现不了像Readerrr上那种上传文件即时显示到内容流里的效果。兴许最烂

    2022年7月25日
    6
  • Wifi开坑

    Wifi开坑缘起:读书期间,大量接触通信基础,无线快速发展,目光关注点自然是高高的基站塔,以及小小的手机(这个信息社会浓缩操作系统、通信、开源和智能化(智能掌机)的结晶当然也不简单)。至于短距离通信里面的形形色色,眼花缭乱的Wifi、BLE(蓝牙)、Zigbee、体域网则是感知中盲区,异类。一直到博士后期到职业才隐隐感知到,天下大事必出于细的道理。云动:就如“小小”体域网(Bodyareanetwork)中除了通用的天线设计、收发、同步、多通道处理外还有特别关注的鲁棒性设计,如何高可靠无中断地始终获取无线信

    2022年7月21日
    9
  • pycharm中plt.plot没有把图画出来_pycharm运行不出来图片

    pycharm中plt.plot没有把图画出来_pycharm运行不出来图片一、问题描述pycharm开发工具使用plt.show()不显示图像,代码运行也不报错,如下图:二、问题原因pycharm开发工具中窗口显示的问题三、解决方式1、依次点击【File】——>【Setting】——>【Tools】——>【PythonScientific】–【取消勾选】-——>【Apply】-——>【ok】,如下图:2、再次运行程序即可显示图形,如下图:…

    2022年8月27日
    5
  • pycharm安装教程

    pycharm安装教程pycharm是一款功能强大的python编辑器,具有跨平台性,鉴于目前最新版pycharm使用教程较少,为了节约大家摸索此IDE的时间,来介绍一下pycharm在windows下是如何安装的。这是PyCharm的下载地址:http://www.jetbrains.com/pycharm/download/#section=windows进入该网站后,我们会看到如下界面profes…

    2022年7月23日
    7

发表回复

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

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