目录
1. 对路由的理解
它允许你通过定义不同的路径来导航到不同的组件，并且可以实现页面间的无缝切换而不重新加载整个页面。
2. 路由配置演示
(1) 如果还没下载vue-router需要先下载
npm install vue-router
(2) 配置文件。
scr 目录下新建 router 文件夹，在其下创建index.ts 文件
index.ts 文件
import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
const router = createRouter({
history:createWebHistory(),
routes:[
{
path:'/home',
component:Home
},
{
path:'/news',
component:News
},
{
path:'/about',
component:About
}
]
})
export default routercreateRouter： 这是从 vue-router 包中导入的一个函数，用于创建一个新的路由器实例。
createWebHistory：也是从vue-router 包中导入的一个函数，意味着应用将使用 history 模式，与之对应的还有hash模式。
export default router：导出路由实例，以方便在其他地方导入使用。
(3) 在main.ts 下使用 vue-router
main.ts 文件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App);
app.use(router)
app.mount('#app')
(4) 新建几个组件，并编写跳转代码
App.vue 文件
<template>
<div class="app">
<h2 class="title">Vue路由测试</h2>
<!-- 导航区 -->
<div class="navigate">
<RouterLink to="/home" active-class="active">首页</RouterLink>
<RouterLink to="/news" active-class="active">新闻</RouterLink>
<RouterLink to="/about" 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>(5) 跳转演示
注意点：
<1> 通过点击导航，视觉效果上消失了的路由组件，默认是被卸载掉的，需要的时候再去挂载。
3. History 与 Hash 模式
Vue Router 提供了两种主要的路由模式：History 模式 和 Hash 模式。
3.1 history 模式
优点：url 更加美观，不带有 #，更接近传统网站的url.
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有 404 报错。
3.2 hash 模式
优点：兼容性更好，因为不需要服务器端处理路径。
缺点：url 不美观，且在`SEO`优化方面相对较差。
3.3 刷新导致404的原因
使用 history 模式，如果服务端不配合处理路径问题，那么刷新会有404 报错。原因是当你直接访问某个路由路径或刷新页面时，浏览器会向服务器请求该路径，而服务器如果没有正确配置，则会返回 404 错误。
hash模式不会出现这种情况的原因是，'#'号后面的部分被称为 hash部分，例如一个链接 http://xxxxx.xxx/#aaa 浏览器在请求页面时，只会发送 http://xxxxx.xxx 这部分 URL 给服务器，而这部分 #aaa（即 hash 部分）不会被发送。因此无论用户访问的路径是什么（例如 /home /about ），服务器始终只接收到根路径 / 的请求。这意味着服务器总是返回 index.html 文件，然后由 Vue Router 在客户端解析并显示相应的组件。
4. router-link 中 to的写法
4.1 字符串写法
<router-link active-class="active" to="/home">主页</router-link>4.2 对象写法
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>5. 路由命名
作用：可以简化路由跳转及传参
routes:[
{
name:'zhuye',
path:'/home',
component:Home
},
{
name:'xinwen',
path:'/news',
component:News,
},
{
name:'guanyu',
path:'/about',
component:About
}
]简化后的路由跳转
<router-link :to="{name:'guanyu'}">跳转</router-link>6. 嵌套路由
演示效果如下
(1) 编写 News 的子路由：Details.vue
Details.vue 组件
<template>
<div>新闻详情</div>
</template>
<script lang="ts">
</script>
<style lang="scss" scoped>
</style>News.vue组件
<template>
<div class="news">
<ul>
<li><RouterLink to="/news/details">新闻1</RouterLink></li>
<li>新闻2</li>
<li>新闻3</li>
</ul>
<div class="details">
<RouterView></RouterView>
</div>
</div>
</template>
<script>
</script>
<style>
.news {
display: flex;
gap: 100px;
}
.details {
width: 200px;
height: 50px;
border: 1px solid black;
}
</style>(2) 配置路由规则，使用 children 配置项
router/index.ts 文件
import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'
import Details from '@/pages/Details.vue'
const router = createRouter({
history:createWebHistory(),
routes:[
{
path:'/home',
component:Home
},
{
path:'/news',
component:News,
children:[
{
name:'xiang',
path:'details',
component:Details
}
]
},
{
path:'/about',
component:About
}
]
})
export default router(3) 效果如下
7. 路由传参
7.1 query 传参
7.1.1 写法
写法1：to 字符串写法
<li><RouterLink to="/news/details?a=1&b=2&content=欢迎你">新闻1</RouterLink></li>写法2：to 对象写法
<RouterLink :to="{
path: '/news/details',
query:{
id:1,
title:'新闻1',
content:'新闻1的内容'
}
}">新闻1</RouterLink>效果如下：
7.1.2 接收参数
Details.vue 组件
<template>
<div>新闻详情</div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query)
</script>
<style lang="scss" scoped>
</style>7.2 params 传参
7.2.1 写法
写法1：to 字符串写法
<RouterLink to="/news/details/001/新闻001/内容001">新闻1</RouterLink>写法2：to 对象写法
<RouterLink :to="{
name: 'xiang',
params:{
id:1,
title:'新闻1',
content:'新闻内容1'
}
}">新闻1</RouterLink>7.2.2 接收参数
Details.vue 组件
<template>
<div>新闻详情</div>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params)
</script>
<style lang="scss" scoped>
</style>效果如下
7.2.3 注意事项
备注1：传递`params`参数时，若使用`to`的对象写法，必须使用`name`配置项，不能用`path`。
备注2：传递`params`参数时，需要提前在规则中占位。
占位格式如下
{
path:'/news',
component:News,
children:[
{
name:'xiang',
path:'details/:id/:title/:content',
component:Details
}
]
},8. 路由的props配置
设置 props:true；可以将 params 参数作为 props 传递给子组件
router/index.ts
{
path:'/news',
component:News,
children:[
{
name:'xiang',
path:'details/:id/:title/:content',
component:Details,
props:true
}
]
},News.vue组件
<template>
<div class="news">
<ul>
<li>
<RouterLink :to="{
name: 'xiang',
params:{
id:1,
title:'新闻1',
content:'新闻内容1'
}
}">新闻1</RouterLink>
</li>
<li>新闻2</li>
<li>新闻3</li>
</ul>
<div class="details">
<RouterView></RouterView>
</div>
</div>
</template>
<script>
</script>
<style>
.news {
display: flex;
gap: 100px;
}
.details {
width: 200px;
height: 50px;
border: 1px solid black;
}
</style>Details.vue组件
<template>
<div>新闻详情</div>
<div>{
{id}}</div>
<div>{
{title}}</div>
<div>{
{content}}</div>
</template>
<script lang="ts" setup>
let a = defineProps(['id','title','content'])
console.log(a)
</script>
<style lang="scss" scoped>
</style>
9. 编程式导航
9.1 push导航
特点：导航到一个新的路由，并将该路由添加到历史记录栈中。
语法：
<script setup>
import { useRouter } from 'vue-router';
let router = useRouter();
function goTo() {
router.push({
name: "xiang",
params: {
id: 1,
title: "详情1",
content: "我是新闻详情页",
},
});
}
</script>9.2 replace导航
特点：导航到一个新的路由，但不会将该路由添加到历史记录栈中（即替换当前的历史记录条目）
语法：
<script setup>
import { useRouter } from 'vue-router';
let router = useRouter();
function goTo() {
router.replace({
name: "xiang",
params: {
id: 1,
title: "详情1",
content: "我是新闻详情页",
},
});
}
</script>10. 总结
以上就是和 vue-router 相关的部分内容，包含路由配置、路由的两种模式、路由嵌套、传参、编程式导航等等。
更多相关内容点击下方链接 ↓ ↓ ↓