demo\src\router\index.js
import { createRouter, createWebHashHistory, createWebHistory } from "vue-router"
const routes = [
{
path: "/",
// component: () => import("../views/index.vue")
component: () => import("@/views/index.vue")
},
{
path: "/content", // 使用查询字符串传递参数 http://localhost:5173/content?id=100&title=邓瑞编程
component: () => import("@/views/content.vue")
},
{
path: "/user/:id/name/:name", // 使用路径传递参数 http://localhost:5173/user/007/name/邓瑞
component: () => import("@/views/user.vue")
},
{
//可选参数 name? 表示该参数不是必需的
path: "/userHistory/:id/name/:name?", // http://localhost:5173/userHistory/007/name
component: () => import("@/views/user.vue")
},
]
const router = createRouter({
// 使用url的#符号之后的部分模拟url路径的变化,因为不会触发页面刷新,所以不需要服务端支持
// history: createWebHashHistory(),
history: createWebHistory(),
routes
})
export default router
demo\src\views\content.vue
<script setup>
</script>
<template>
内容页 - 邓瑞编程 <hr>
id: {{ $route.query.id }} <br>
title: {{ $route.query.title }}
</template>
<style scoped>
</style>
demo\src\views\user.vue
<script setup>
</script>
<template>
个人主页 - www.dengruicode.com <hr>
id: {{ $route.params.id }} <br>
name: {{ $route.params.name }}
</template>
<style scoped>
</style>
3.使用查询字符串或路径传递参数
-- 未经授权禁止转载 --