路由传参 [ params 模式 ]

上一节我们学习了 Vue query 模式的路由传参，本节讲解基于命名路由的 params 模式传参。params 方式可以有效地隐藏参数名称，并可以更严格地控制参数。

params 模式路由传参

params 模式路由传参在浏览器中的 url 格式为 /路由/参数值/参数值，实现步骤

1. 定义路由

const routes = [
	{ 
		name : "ParamsDemo", 
		path : "/ParamsDemo/:id/:name", 
		component : ()=> import("./pages/ParamsDemo.vue")
	}
]

2. 执行跳转

1. route-link : <router-link to="/路由/参数/参数" 或者 <router-link :to="{name:"路由名称", params:{键:值, 键:"值",...}}"

2. js api : router.push({ name : "路由名称", params:{键:值, 键:"值",...} });

3. 接收参数

在 onMounted 生命周期，使用 route 对象的 params 属性接收数据, 关键代码 :

import { useRoute }       from "vue-router";
onMounted(()=>{
	let paramsData = route.params;
	console.log(paramsData);
});

在非 setup 环境可以直接使用 this.$router.push()实现跳转功能， 使用 this.$route.params 实现参数的接收。

实战代码

route.js

// 1. 定义路由
const routes = [
	{ path : '/'     , name : "Home",  component : ()=> import("./pages/Home.vue")  },
	{ 
		path       : '/About', 
		name       : "About", 
		components : {
			default     : ()=> import("./pages/About.vue"),
			routerView1 : ()=> import("./pages/User.vue")
		},
	},
	{ path : '/User' , name : "User",  component : ()=> import("./pages/User.vue")  },
	{ 
		name : "ParamsDemo", 
		path : "/ParamsDemo/:id/:name", 
		component : ()=> import("./pages/ParamsDemo.vue")
	}
]

app.vue

<router-link 
:to="{name:'ParamsDemo', params:{id:12,name:'lesscode'}}">params 传参</router-link>

ParamsDemo.vue

<template>
	<div>
		params : {{	paramsData}}
	</div>
</template>
<script setup>
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
const paramsData = reactive({id:0});
onMounted(()=>{
	const route = useRoute();
	console.log(route.params);
});
</script>
<style>
</style>