work-notes（14）：路由跳转如何传值，VUE3.0 路由如何携带参数传值？

时间：2022-05-23

文章目录 问题描述解决思路路由跳转如何携带参数（1）VUE2.0 方式1、router-link 方式2、this.$router.push() 方式3、获取参数方式 （2）VUE3.0 方式解析1）引入路由2）使用3）取值

问题描述

1、项目需要制作类似于面包屑的网页跳转，就是点击某个按钮（菜单栏）等，
	把某个区域跳转到一个新的页面；
	
2、之前的代码发现是使用 v-if 判断值，进行不同的展示，就显得有点那啥；
	毕竟如果跳转页面多的时候就不适用了；

解决思路

1、既然是页面跳转就不要再往 v-if \ v-show 那个地方钻了，就是路由跳转，
	但是不是写在 router.js 里面；
	
2、就是引入使用 router 组件；并在后面带参数；

3、一般这种跳转页面常见于新增、编辑人员页面（信息比较多，d窗不能满足时）；
	其次就是审核页面等；
	这些一般都指定了某个特定的人员或者ID；

4、所以可以想到，把对应点击的这个人员的ID，通过路由跳转携带；
	在携带进入页面后，再通过查询该ID得到数据，即可完成 *** 作；

路由跳转如何携带参数 （1）VUE2.0 方式 1、router-link 方式

<!-- 直接跳转 -->
<router-link to='/testDemo'>
 <button>点击跳转2</button>
</router-link>
  
<!-- 带参数跳转 -->
<router-link :to="{path:'testDemo',query:{setid:123456}}">
 <button>点击跳转1</button>
</router-link>
  
<router-link :to="{name:'testDemo',params:{setid:1111222}}">
 <button>点击跳转3</button>
</router-link>

2、this.$router.push() 方式

//直接跳转
 this.$router.push('/a');
  
 //带参数跳转
 this.$router.push({path:'/a',query:{a:123456}});
 this.$router.push({name:'a',params:{a:123456}});

3、获取参数方式

console.log(this.$route.query.a);
console.log(this.$route.params.a);

（2）VUE3.0 方式

注意点：
1、router 要进行引入；VUE3.0写法有点难受的；

可以封装一个函数来进行，例如：

// 点击跳转到 [编辑人员 页面]
const updatePersonel = (slotData) => {
  router.push({
    path: "/createUpdatePersonnel",
    query: {
      user_operation: "edit",
      edit_code_card: slotData.data.row.code_card,
      edit_id_company: slotData.data.row.id_company,
    },
  });
};

解析

1、首先按需引入路由；

2、通过 push 把
	（1） path 跳转目的路径；
	（2）query/params 参数传进去；

1）引入路由

import { useRouter } from "vue-router";
// 路由
const router = useRouter();

2）使用

// 点击跳转到 [编辑人员 页面]
const updatePersonel = (slotData) => {
  router.push({
    path: "/createUpdatePersonnel",
    query: {
      user_operation: "edit",
      edit_code_card: slotData.data.row.code_card,
      edit_id_company: slotData.data.row.id_company,
    },
  });
};

3）取值

注意：
	这里是 route 没有 r 的；
	
	之前我加了 r 就取不到值；

import { useRouter } from "vue-router";

const route = useRouter();

// 用户点击传入路由的 （添加/编辑） [路由传入]
let user_operation = route.currentRoute.value.query.user_operation;

// 用户点击[编辑]，传入的值 [路由传入]
let edit_code_card = route.currentRoute.value.query.edit_code_card;
let edit_id_company = route.currentRoute.value.query.edit_id_company;