zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

Vue路由 方式 通过 三种 跳转
2023-06-13 09:12:47 时间

大家好,又见面了,我是你们的朋友全栈君。

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.cn/157429.html原文链接:https://javaforall.cn