【Vue3】如何使用路由
1. 什么是路由
在Vue中，路由（route）是一个非常重要的概念，它可以让用户通过不同的URL访问应用程序中不同的组件和页面而不用重新加载整个应用程序。路由是实现SPA（Single Page Application 单页面应用）的关键技术。
2. 如何使用路由
- 安装vue-router
# Vue3中最好安装vue-router 4.x的版本
# 安装的命令
npm i vue-router@4
- 在src目录下创建router文件夹，在其中创建index.ts文件
// 导入vue-router
import { createRouter, createWebHistory } from 'vue-router'
// 创建路由器
const router = createRouter({
// 设置路由器的工作模式
history: createWebHistory(),
// 配置路由
routes:[
{
// 这几项几乎是必填项
path:'/home', // 路由路径
name:'home', // 路由名字
component: () => import('@/页面文件的位置'), // 路由懒加载
// 以下根据你的项目需要
redirect: '/', //路由重定向
meta:{
// meta中可以添加一些路由包含的信息，根据实际需要配置
...
},
childrend:[
// children中用来配置子路由
...
]
}
]
})
// 把路由器暴露出去
export default router
- 在main.ts文件中注册路由
// main.ts文件
// 引入createApp用于创建应用
import { createApp } form 'vue'
// 引入App根组件
import App from './App.vue'
// 引入路由器
import router from './router'
// 创建app
const app = createApp(App)
// 注册路由
app.use(router)
// 挂载应用
app.mount('#app')
3. 路由器的工作模式
- history模式：
- 优点： url看起来美观，没有 "#" 出现在url中
- 缺点：后期项目上线需要后端配合处理路径问题，否则刷新出现404
- hash模式：
- 优点：不需要服务端配合处理路径问题
- 缺点：url带有 "#" 看起来不美观，且在SEO优化上不太友好
4. 在HTML结构中展示路由界面
在Vue3中需要引入 RouterView API
<template>
<div class="app">
<h2>Vue3 路由测试</h2>
<!-- 导航区 -->
<div class="navigate">
<RouterLink to="home" active-class="active">首页</RouterLink>
<RouterLink :to="{name:'news'}" active-class="active">新闻</RouterLink>
<RouterLink @click='toAbout' active-class="active">关于</RouterLink>
</div>
<!-- 展示区 -->
<div class="main-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script setup lang='ts' name='App'>
// 引入router-view和router-link后可在template中使用
import { RouterView, RouterLink } from 'vue-router'
// router-view
// 根据当前的url在指定区域内展示路由的组件或页面
// router-link
// 类似于 <a> 标签，<router-link>标签自带的to属性可以用于跳转到指定路由
// 也可使用方法进行手动的跳转
// 需要引入useRouter
import { useRouter } from 'vue-router'
// 创建路由器
const router = useRouter()
function toAbout() {
// 使用push()方法进行路由跳转
router.push('/about')
}
</script>
5. 路由传参之query
在进行路由跳转的时候可以通过query字段，将参数传递过去。
<!-- news组件 -->
<template>
<div class="container">
<!-- 导航区 -->
<ul class="menu">
<router-link @click='toDetail'>{{ item.title }}</router-link>
</ul>
<!-- 展示区 -->
<div class="detail">
<router-view></router-view>
</div>
</div>
</template>
<script setup lang='ts' name='news'>
// 假设当前组件为news，其下有一个子组件Detail
import { useRouter } from 'vue-router'
const router = useRouter()
// 跳转到detail的方法
function toDetail() {
router.push({
path: 'news/detail',
//通过query字段传递参数
query:{
id: 1,
title: "xxxxxxxx",
content: 'xxxxxxxxx'
}
})
}
</script>
<!-- detail组件 -->
<template>
<div>
<ul class="news-list">
<li>编号：{{ query.id }}</li>
<li>标题：{{ query.title }}</li>
<li>内容：{{ query.content }}</li>
</ul>
</div>
</template>
<script lang='ts' setup name='detail'>
// 引入route：注意route和router是不同的
// route：包含的路由信息
// router：路由器
import { useRoute } from 'vue-router'
// 引入toRefs
import { toRefs } from 'vue'
// 创建route
const route = useRoute()
// 由于这些参数不是响应式的，需要使用toRefs包裹
// 经过解构的query包含了路由传递来的参数
let { query } = toRefs(route)
</script>
6. 路由传参之params
与query传参相似，在进行路由跳转时可以通过params进行传参。但是使用params进行传参的时候，在路由配置文件内必须进行占位。
// 配置路由的index.ts文件
// 创建一个路由器并暴露出去
import { createRouter, createWebHistory } from "vue-router";
// 引入要呈现的组件
import News from "../components/News.vue";
import Detail from "../components/Detail.vue";
// 创建路由器
const router = createRouter({
// 配置路由
history: createWebHistory(), // 路由器的工作模式
routes: [
{
name:"news",
path: "/news",
component: News,
children:[
{
name:"detail",
// 子级下的path不需要加/
// :id / :title / :content <====这些就是用来占位的，使用params传参必须填写
path:"detail/:id/:title/:content",
component:Detail
}
]
}
],
});
// 暴露router
export default router;
<!-- news组件 -->
<template>
<div class="container">
<!-- 导航区 -->
<ul class="menu">
<router-link @click='toDetail'>{{ item.title }}</router-link>
</ul>
<!-- 展示区 -->
<div class="detail">
<router-view></router-view>
</div>
</div>
</template>
<script setup lang='ts' name='news'>
// 假设当前组件为news，其下有一个子组件Detail
import { useRouter } from 'vue-router'
const router = useRouter()
// 跳转到detail的方法
function toDetail() {
router.push({
// 如果要使用params传参，必须提供路由的name属性
name: 'detail',
// 通过params字段传递参数
params:{
id: 1,
title: "xxxxxxxx",
content: 'xxxxxxxxx'
}
})
}
</script>
<!-- detail组件 -->
<template>
<div>
<ul class="news-list">
<li>编号：{{ params.id }}</li>
<li>标题：{{ params.title }}</li>
<li>内容：{{ params.content }}</li>
</ul>
</div>
</template>
<script lang='ts' setup name='detail'>
// 引入route：注意route和router是不同的
// route：包含的路由信息
// router：路由器
import { useRoute } from 'vue-router'
// 引入toRefs
import { toRefs } from 'vue'
// 创建route
const route = useRoute()
// 由于这些参数不是响应式的，需要使用toRefs包裹
// 经过解构的params包含了路由传递来的参数
let { params } = toRefs(route)
</script>
