【vue-router学习】从零开始学习vue-router4.x（四）

这是我基于vue3的进阶学习，学习vue-router以便搭建单页面应用。使用的是js，等练过一遍再改用ts。

前面学的一些还没有做笔记，暂定此随笔为第四章。

路由传参

方式一（query传参）

一个简单的表格，数据为data.json，toDetail函数调用router.push方法，然后使用query传递一个对象（query只能传对象）

<!-- Login.vue -->

<script setup>
	import { data } from "./data.json"
	import { useRouter } from "vue-router"
	
	const router = useRouter()
	
	const toDetail = (item) => {
		router.push({
			path: "/reg",
			query: item
		})
	}
</script>

<template>
	<div>我是列表页面</div>
	<table cellspacing="0" class="table" border="1">
		<thead>
			<tr>
				<th>品牌</th>
				<th>价格</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr :key="item.id" v-for="item in data">
				<th>{{ item.name }}</th>
				<th>{{ item.price }}</th>
				<th>
					<button @click="toDetail(item)">详情</button>
				</th>
			</tr>
		</tbody>
	</table>
</template>

 

// data.json

{
	"data": [
		{
			"name": "老坛酸菜",
			"price": 500,
			"id": 1
		},
		{
			"name": "火腿肠",
			"price": 800,
			"id": 2
		},
		{
			"name": "翡翠玉石",
			"price": 80000,
			"id": 3
		}
	]
}

 

参数接收页面，使用route接收参数，并将参数展示出来

<!-- Reg.vue -->

<script setup>
	import { useRoute,useRouter } from "vue-router"
	
	const route = useRoute()
	const router = useRouter()
	
	
</script>

<template>
	<button @click="router.back">返回</button>
	<div>品牌：{{route.query.name}}</div>
	<div>价格：{{route.query.price}}</div>
	<div>ID：{{route.query.id}}</div>
</template>

 

方式二（params传参）

• params传参不能使用path，只能用name。
• params传参是存在内存中的，所以不会在url上显示，且刷新页面参数会消失

路由配置

import { createRouter,createWebHistory } from 'vue-router'

const routes = [
	{
		path: "/",
		name: "Login",
		component: ()=>import("../components/Login.vue")
	},
	{
		path: "/reg",
		name: "Reg",
		component: ()=>import("../components/Reg.vue")
	}
]

const router = createRouter({
	history: createWebHistory(),
	routes
})

export default router

页面代码

<!-- Login.vue -->

<script setup>
	import { data } from "./data.json"
	import { useRouter } from "vue-router"
	
	const router = useRouter()
	
	const toDetail = (item) => {
		router.push({
			name: "Reg",
			params: item
		})
	}
</script>

<template>
	<div>我是列表页面</div>
	<table cellspacing="0" class="table" border="1">
		<thead>
			<tr>
				<th>品牌</th>
				<th>价格</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr :key="item.id" v-for="item in data">
				<th>{{ item.name }}</th>
				<th>{{ item.price }}</th>
				<th>
					<button @click="toDetail(item)">详情</button>
				</th>
			</tr>
		</tbody>
	</table>
</template>

 

<!-- Reg.vue -->

<script setup>
	import { useRoute,useRouter } from "vue-router"
	
	const route = useRoute()
	const router = useRouter()
	
	
</script>

<template>
	<button @click="router.back">返回</button>
	<div>品牌：{{route.params.name}}</div>
	<div>价格：{{route.params.price}}</div>
	<div>ID：{{route.params.id}}</div>
</template>

<!-- App.vue -->


<script setup>
import Caculator from './components/Caculator.vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const toPage = (url) => {
	router.push(url)
}

const prev = () => {
	router.back()
}
const next = () => {
	router.go(1)
}
</script>

<template>
	<div>
		<router-link replace to="/">Login</router-link>
		<router-link replace style="margin-left: 10px;" to="/reg">Reg</router-link>
		
		<button @click="toPage('/')">Login</button>
		<button @click="toPage('/reg')">Reg</button>
		
		<button @click="next()" style="margin-left: 10px;">next</button>
		<button @click="prev()" style="margin-left: 10px;">prev</button>
		<router-view></router-view>
	</div> 
</template>

<style>
	
</style>

 效果

url并没有参数

刷新一下，参数消失

方式三（动态路由参数）

代码

在方式二的基础基础上进行改进，使得刷新不会丢失内容。

修改Reg.vue，使用data.find进行查找。

由于item可能为空所以要使用?。

<!-- Reg.vue -->

<script setup>
	import { data } from "./data.json"
	import { useRoute,useRouter } from "vue-router"
	
	const route = useRoute()
	const router = useRouter()
	
	const item = data.find(v => v.id == route.params.id)
</script>

<template>
	<button @click="router.back">返回</button>
	<div>品牌：{{item?.name}}</div>
	<div>价格：{{item?.price}}</div>
	<div>ID：{{item?.id}}</div>
</template>

效果

刷新后数据没有丢失

参考链接

P4路由传参