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


相关推荐

  • 微信小程序 之 40029

    微信小程序 之 40029开发版正常使用,但是生成体验版之后报40029错误。错误原因:1:openid和当前小程序不对应,或者AppSecret秘钥和当前小程序不对应的。2:当前小程序能正确获取到token,但是在code还没有失效时,另一个小程序也用这个小程序的openid或者AppSecret秘钥去请求token。这个时候也会报40029,说到底还是第一个错误,只是触发的方式不同。解决办法也很简单,检查一下,当前的openid和AppSecret是否和当前要部署使用的小程序的openid和Ap..

    2022年5月6日
    46
  • MySQL中的锁机制详细说明[通俗易懂]

    MySQL中的锁机制详细说明[通俗易懂]一、MySQL锁机制起步锁是计算机用以协调多个进程间并发访问同一共享资源的一种机制。MySQL中为了保证数据访问的一致性与有效性等功能,实现了锁机制,MySQL中的锁是在服务器层或者存储引擎层实现的。二、行锁与表锁首先我们来了解行锁与表锁的基本概念,从名字中我们就可以了解:表锁就是对整张表进行加锁,而行锁则是锁定某行、某几行数据或者行之间的间隙。各引擎对锁的支持情况如下:行锁表锁页锁MyISAM√BDB√√InnoDB√√1.行锁A

    2022年9月29日
    0
  • xsync配置

    xsync配置在~/bin建立xsync:#!/bin/bash#1获取输入参数个数,如果没有参数,直接退出pcount=$#if((pcount==0));thenechonoargs;exit;fi#2获取文件名称p1=$1fname=`basename$p1`echofname=$fname#3获取上级目录到绝对路径pdir=`cd-P$(dirname$p1);pwd`echopdir=$pdir#4获取当前用户名称us

    2022年6月2日
    105
  • android课程设计小项目_app界面模板

    android课程设计小项目_app界面模板1课程格子试用:建立课程表又是一年开学季,相信有不少太平洋的读者都已经结束了暑假迈进了校门,脱离高三党的同学也为数不少。作为一个大学新生,你在未来数年里想要找基友也好,泡妹子也好,都免不掉主要的任务——学习。在大学里学习和高中完全不同,没有人像高中那样天天提醒你今天要上什么课。这里小编为大家推荐一款Android平台上的课程表App课程格子,好让大家记得什么时候该上什么课。软件名称:…

    2022年10月4日
    0
  • c++算法之最长递增子序列(LIS)

    c++算法之最长递增子序列(LIS)题目:输入一个整数n,随后输入n个整数,求这个长度为n的序列中严格递增的子序列的最长长度。例:输入:6143265输出:3解题思路:动态规划。将输入的序列存入一个数组v中,另外再定义一个数组a,用以存储以当前数字v[i]结尾时,最长递增子序列的长度是多少。定义数组时,全部初始化为1,初始状态表示的是最坏的情况,以v[i]结尾的最长递增子序列就是v[i]它本身,长度为1。接着将v[i]逐一…

    2022年6月3日
    26
  • Kotlin与Java的异同(一)

    Kotlin与Java的异同(一)Kotlin简介Kotlin是一种针对Java平台的新编程语言。Kotlin简洁、安全、务实,并且专注于与Java代码的互操作性。它几乎可以用在现在Java使用的任何地方:服务端开发、Android应用等等。Kotlin可以很好地和所有现存的Java库和框架一起工作,而且性能和Java旗鼓相当。Kotlin特点:Kotlin是静态类型语言并支持类型推导,允许维护正确性与性能的同时保…

    2022年7月7日
    43

发表回复

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

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