Vue路由跳转传参

该部分内容即官方文档中的“编程式导航”

vue路由传参是在路由跳转时传递参数。

传参方式分为params和query。

params传参分为url中显示参数和不显示参数两种方式。

官方文档

本部分内容为官方文档中编程式导航的 router.push() 部分。

router.replace() 的用法同 router.push() ,唯一区别就是replace不会向history中添加记录。

router.go() 用法同 window.history.go(n)

1. 通过path匹配路径：

1. 通过占位符传参

getDetail(val: unknown): void {
   this.$router.push({ path: `/getUserDetail/${val}` });
	 // this.$router.push({ path: `/getUserDetail`, params: { ip: val });  // 无效
}

const routes: Array<RouteConfig> = [
  {
    path: "/getUserDetail/:ip",
    name: "UserDetail",
    component: () => import("@/views/user/detail.vue")
  }
];

URL：http://localhost:8081/getUserDetail/180.84.50.155

注意：如果使用了path，再搭配使用params，此时params不会生效。

2. 通过query传参

getDetail(val: unknown): void {
  this.$router.push({ path: "/getUserDetail", query: { ip: val } });
}

const routes: Array<RouteConfig> = [
  {
    path: "/getUserDetail",
    name: "UserDetail",
    component: () => import("@/views/user/detail.vue")
  }
];

<!-- 参数会被收集到$route.query中 -->
<div>参数为：{{ this.$route.query.ip }}</div>

URL展示：http://localhost:8081/getUserDetail?ip=41.4.208.105

2. 通过name匹配路径：

1. 通过params传参

this.$router.push({ name: "UserDetail", params: { ip: val } });

// 路由配置中一种是带 :xxx 占位，不丢参数
const routes: Array<RouteConfig> = [
  {
    path: "/getUserDetail/:ip",
    name: "UserDetail",
    component: () => import("@/views/user/detail.vue")
  }
];

URL展示：http://localhost:8081/getUserDetail/245.97.154.234

// 路由配置中另一种是不带 :xxx 占位。不带占位会出现的问题是，再次刷新的时候，丢参数！！！
const routes: Array<RouteConfig> = [
  {
    path: "/getUserDetail",
    name: "UserDetail",
    component: () => import("@/views/user/detail.vue")
  }
];

URL展示：http://localhost:8081/getUserDetail

<!-- 参数会被收集到$route.params -->
<div>参数为：{{ this.$route.params.ip }}</div>

注意：不带 :xxx 占位path路径，会出现再次刷新的时候丢参数的问题。

2. 通过query传参

this.$router.push({ name: "UserDetail", query: { ip: val } });

const routes: Array<RouteConfig> = [
  {
    path: "/getUserDetail",
    name: "UserDetail",
    component: () => import("@/views/user/detail.vue")
  }
];

URL展示：http://localhost:8081/getUserDetail?ip=216.130.44.129

<!-- 参数会被收集到$route.query中 --> 
<div>参数为：{{ this.$route.query.ip }}</div>

3. 总结

以上是编程式导航的写法。对于声明式导航，即 to后边的内容也是以上1和2的写法。

1和2中 是从$route中获取参数，也可以通过props进行接收。代码如下：

this.$router.push({ path: `/getUserDetail/${ip}` });

{
  path: "/getUserDetail/:ip",
  name: "UserDetail",
  props: true,	// 开启props
  component: () => import("@/views/user/detail.vue")
}

<template>
  <!-- <div>参数为：{{ this.$route.params.ip }}</div> -->
  <!-- <div>参数为：{{ this.$route.query.ip }}</div> -->
  <div>参数为：{{ ip }}</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class NAME extends Vue {
  @Prop() ip!: string;
}
</script>