vue3中路由写法与传参方式的超详细指南
作者：YinLiaoEr
Vue Router 是 Vue.js 官方的路由管理器。它主要用于单页面应用程序（SPA, Single Page Application）中，帮助解决页面导航、组件复用等问题。
基本的使用
1.router配置文件代码
创建一个ts文件,用来写路由器
// 创建一个路由器,并暴露出去
// 引入路由配置文件
import { createRouter, createWebHashHistory,createWebHistory } from 'vue-router'
// 引入可能呈现的组件
import person from '@/components/person.vue'
import button from '@/view或pages/button.vue'
import detail from '@/view或pages/detail.vue'
// 创建路由器
const router = createRouter({
// 必须要写,路由的工作模式 history/Hash
// history: createWebHashHistory(),
history: createWebHistory(),
// 路由规则
routes: [
/* 路由规则格式如下:
其中path 和 component是必填项, 其他选填
{
path: '/路径',
component: aComponent, 对应的组件,后面展示不同的写法
name: 'name',
...其他配置
},
*/
{
path: '/person',
component: person
},
{
path: '/table',
component: () => import('@/view或pages/table.vue')
},
{
path: '/button',
component: button
},
{
path: '/news',
name: 'news',
component: () => import('@/view或pages/news.vue'),
children: [
{
path: 'detail',
component: detail
}
]
},
]
})
export default router路由模式: 通常用history的更多
history: url不带#,但是需要服务端配合处理路径问题
hash: url带# 不需要服务器处理路径问题,但是SEO优化方面较差
嵌套路由
有的时候我们路由展示了一个组件,但是这个组件里面还有别的路由组件,这时候需要使用嵌套路由
// 如果有子路由(嵌套路由),写在children里面
// 其写法跟正常的路由是一样的,但子路由的路径,不用加一开始的/
// 这个路由最终路径为 /news/testDetail
{
path: '/news',
name: 'xinwen',
component: () => import('@/view或pages/news.vue'),
children: [
{
name: 'testDetail',
path: 'detail/:id/:title/:content',
component: detail
},
/* 其他子路由
{
}
*/
]
},路由重定向
将特定的路径，重新定向到已有路由,通常是用于默认展示某某内容使用的
下面的代码意思是,当路径为 / 的时候, 将会重定向访问到 /demo
{
path:'/',
redirect:'/demo'
}
2.使用router
main.ts中,我们需要使用router
import router from './router/index'
const app =createApp(App)
app.use(router)
app.mount('#app')
在需要使用router的页面,使用RouterLink和RouterView来显示对应的vue页面
<template>
<div class="app">
<h2 class="title">Vue路由测试</h2>
<!-- 导航区 -->
<div class="navigate">
<RouterLink to="/table" active-class="active">表格</RouterLink>
<RouterLink to="/button" active-class="active">按钮</RouterLink>
<RouterLink to="/news" active-class="active">新闻</RouterLink>
</div>
<!-- 展示区 -->
<div class="main-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script lang="ts" setup name="App">
import {RouterLink,RouterView} from 'vue-router'
</script>RouterLink 是用于定义导航链接的,它类似于 HTML 中的 <a> 标签。点击RouterLink 时，Vue Router 会动态更新视图，而不会重新加载整个页面。值得注意的是,RouterLink标签需要有一个to属性,也就是点击它后,给路由器的一个标识 (如何找到对应组件)
RouterView用于显示当前路由对应的组件,也就是把渲染出来的组件,放在对应页面的哪一个位置上。
to的写法
<!-- 第一种：to的字符串写法 直接写路径的字符串 -->
<router-link active-class="active" to="/home">主页</router-link>
<!-- 第二种：to的对象写法 -->
<router-link active-class="active"
:to="{
path:'/home',
// 其他配置等 ......
}"
>
Home
</router-link>
<router-link active-class="active"
:to="{
name:'detail',
// 其他配置等 ......
}"
>
Detail
</router-link>通常还是对象写法用的更多一点,因为功能性更强 (可以使用name来路由, 传参等等)
Replace属性
replace属性能够设置在路由跳转时,浏览器操作历史记录的模式 (push/replace)
push: 历史记录入栈
push是默认的模式,支持浏览器的返回和前进。每次导航都会向浏览器的历史栈添加一个新的记录。
replace:历史记录直接替换
新的路由会替换当前的历史记录条目，而不是添加一个新的。这样做的结果是，如果用户点击了后退按钮，他们将不会回到刚刚从该页面导航之前的位置，而是跳转到更早的一个历史记录条目。
默认是push,如果想要开启replace,只需要标签上加上这个属性
<RouterLink replace .......>News</RouterLink>
路由传参
传递和接收参数的关键是 route 对象。route 对象包含了当前路由的所有信息，包括路径、参数、查询字符串等。为了在组件中访问这些信息，Vue Router 提供了 useRoute 钩子。我们后续传参会经常用到它
1.Query参数
众所周知,query参数就是在路径后拼上键值对,如 /路径?id=1&name=Eve&age=18 因此我们可以直接在路径上拼,或者是在to的对象中,用query来声明
发送
<!-- 跳转并携带query参数（to的字符串写法） -->
<router-link to="/person/detail?id=1&name=Eve&age=18">
跳转
</router-link>
<!-- 跳转并携带query参数（to的对象写法） -->
<RouterLink
:to="{
//name:'ren', //用name也可以跳转
path:'/person/detail',
query:{
id:1,
name: 'Eve',
age: 18
}
}"
>
显示人
</RouterLink>接收
我们通过useRoute()来获取到当前组件的路由信息,接着把query取出来就行了
import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
const a = route.query
console.log(route.query.name); // Eve
console.log(route.query.age); // 18
2.Params参数
我主要是学后端的,我感觉这个params参数就跟请求里面的那个PathVariable有一些相似之处,都是通过路径来传参的
路由的配置
注意点1:params参数需要在路由规则中占位; 注意点2:to中只能用name来进行路由跳转,path不行
我这里主要是想传到testDetail里面, 可以看到我打算传三个,id,title,content,
传什么,就写 /:参数名
{
path: '/news',
name: 'xinwen',
component: () => import('@/view或pages/news.vue'),
children: [
{
name: 'testDetail',
path: 'detail/:id/:title/:content',
component: detail
}
]
},
发送
注意:参数必须按照路由中的顺序传 且不能少传
<!-- 直接拼到路径中,会按照占位去赋值 -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{newsItem.title}}</RouterLink>
<RouterLink :to="{
name:'testDetail', //用name跳转,不能用path
params:{
id:newItem.id,
title:newItem.title,
content:newItem.content
}
}">
{{ newItem.title }}
</RouterLink>
少传会报错,导致功能无法使用
接收
与query非常相似,只不过是取的params
import { useRoute } from 'vue-router'
let route = useRoute()
console.log(route.params);
3.Props参数
路由的props配置
如果想要传props参数,需要在路由规则里面配置,它并不是单纯的在RouterLink上面写的,而是需要RouterLink上传入params参数
{
name:'xiang',
path:'detail/:id/:title/:content',
component:Detail,
// props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
// 但是数据就是写死的了,因此用的很少
// props:{a:1,b:2,c:3},
// props的布尔值写法，作用：把收到了每一组"params"参数，作为props传给Detail组件
// 如果写了true,那么正常按照params参数写就行,但是接收的地方可以通过defineProps来接
// props:true
// props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
props(route){
// return route.query 想传别的回去也行,但我们直接传params回去
return route.params
}
}接收
接收就是正常的props参数接收的方法 defineProps
<script lang="ts" setup namespace="Detail">
import { ref,toRefs} from 'vue'
import { useRoute } from 'vue-router'
let route = useRoute()
const props=defineProps({
id: String,
title: String,
content: String
})
const {id,title,content}=toRefs(props)
</script>
编程式导航
路由的编程式导航是指通过 JavaScript 代码来控制页面的导航，而不是通过 <RouterLink> 组件。编程式导航提供了更大的灵活性，可以在特定条件下触发导航操作，或者在导航前后执行一些逻辑。
import {useRouter} from 'vue-router'
// 找到路由器
const router = useRouter()
function clickToRoute(name:string){
/*
这里是路由器的两种工作模式,push和replace选取自己需要的模式
参数的话跟RouterLink的to写法是一样的
可以直接传字符串路径,也可以写对象....
支持传参
*/
// router.replace('/demo')
router.push({name:name})
}以上就是vue3中路由写法与传参方式的超详细指南的详细内容，更多关于vue3路由写法与传参方式的资料请关注脚本之家其它相关文章！