ToB企服应用市场:ToB评测及商务社交产业平台

标题: 一文彻底学会Vue3路由:全面讲解路由流程、路由模式、传参等——全栈开辟之 [打印本页]

作者: 美丽的神话 时间: 2024-6-29 22:46
标题: 一文彻底学会Vue3路由:全面讲解路由流程、路由模式、传参等——全栈开辟之
全栈开辟一条龙——前端篇
第一篇：框架确定、ide设置与项目创建
第二篇：先容项目文件意义、组件结构与导入以及setup的引入。
第三篇：setup语法，设置响应式数据。
第四篇：数据绑定、盘算属性和watch监视
第五篇 : 组件间通信及知识补充
第六篇：生命周期和自定义hooks
本文将带你从头到尾将Vue3中的路由学透，学完之后所有的跳转需求都可以实现。

路由

路由可以实现页面的跳转，可以用来实现SPA应用（单页面应用）

雷同这种，左边导航，右边展示，全程画面不抖动，不跳转。
点击导航，路径（网址）发生变化，路由器捕获，卸载当前组件，挂载新的组件，这些组件都是一个一个Vue文件写的页面。
一、路由底子实践——流程梳理

我们先安装路由 npm i vue-router,再在src下创建router文件夹。
1.index.ts

我们在router中创建index.ts,这个文件的意义在于创建一个路由器，并将之暴露出来。

import { createRouter } from "vue-router"
import home from "@/components/home.vue";
import dog from "@/components/dog.vue";
import cc from "@/components/cc.vue";
//创建路由器
const router = createRouter({
//管理路由
routes:[ //一个一个的路由规则
{
//路径
path:'/home',
//组件绑定
component:home
},
{
//路径
path:'/dog',
//组件绑定
component:dog
},
{
//路径
path:'/test',
//组件绑定
component:cc
}
]
})
export default router

复制代码

请细致检察写在代码旁的解释，这里做一个大致阐明，这个地方是要举行一个路由的绑定，我们先在src/components中新建三个文件，这三个文件就是之后我们可以用来切换的页面Vue文件

然后按照如上语法绑定至此，我们的路由器就建立好了。
可能碰到的报错

如果碰到这个问题，是由于你没有设置路由模式（这个在本文后面会讲）
你要引入设置路由模式的组件

//引入路由器模式
import { createWebHistory } from "vue-router";

复制代码

然后在const中加入 history:createWebHistory(),

这样报错就消失了。
2.三个页面组件的vue

我们绑定完成之后，必须要在相应组件中加入内容，不然会报错。我们测试的时候可以随便写，我以下给出三个样例，你可以直接复制。
dog.vue:

<template>
<div class = "style_test">
<button @click="add_border_collie">添加一只边牧！</button>
<hr>
<img v-for="(bc,index) in border_collie" :src="bc" :key="index" class="sizee">
</div>
<div class = "style_test">
<button @click="add_dog">随机添加一只狗</button>
<hr>
<img v-for="(bc,index) in dog" :src="bc" :key="index" class="sizee">
</div>
</template>
<script lang="ts">
export default {
name : 'dog'//组件名
}
</script>
<script lang="ts" setup>
import {reactive, ref} from 'vue'
import axios from 'axios';
let border_collie=reactive([])
let dog=reactive([])
async function add_border_collie(){
try{
let result=await axios.get('https://dog.ceo/api/breed/collie/border/images/random')
border_collie.push(result.data.message)
} catch(error){alert(error)}
}
async function add_dog(){
try{
let result=await axios.get('https://dog.ceo/api/breeds/image/random')
dog.push(result.data.message)
} catch(error){alert(error)}
}
</script>
<style scoped>
.style_test{
background-color: rgb(208, 223, 40);
box-shadow: 0 0 10px;
border-radius:10px;
padding: 20px;
}
.sizee{
height: 150px;
margin-right: 10px;
}
</style>

复制代码

cc.vue

<template>
<h1>TTTi9er</h1>
</template>
<script lang="ts">
export default {
name : 'test'//组件名
}
</script>
<style>
</style>

复制代码

home.vue

<template>
<h1>Csy</h1>
</template>
<script lang="ts">
export default {
name : 'home'//组件名
}
</script>
<style>
</style>

复制代码

3.main.ts

这个文件是管理创建网页文件和挂载等的。我们必要在这里声明我们的路由器。

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//创建应用
const app = createApp(App)
//使用路由器
app.use(router)
//挂载app
app.mount('#app')

复制代码

如图，我们必要删掉原来的链式代码，讲createapp天生的对象独立出来，在上面使用路由器。这样，我们就使用了之前export暴露出来的路由器。
4.app.vue

末了一步，我们要在主页上展示出我们的路由。

<template>
<div class = "app">
<h1 class="title">Vue路由</h1>
<div class="guide">
<RouterLink to="/home" active-class="active">首页</RouterLink>
<RouterLink to="/dog" active-class="active">狗狗</RouterLink>
<RouterLink to="/test" active-class="active">测试</RouterLink>
</div>
<div class="content">
<RouterView></RouterView>
</div>
</div>
</template>
<script>
//路由器调用占位
import { RouterView } from 'vue-router';
export default{
name : 'app', //组件名
}
</script>
<style>
.title{
text-align: center;
word-spacing: 5px;
margin: 30px 0;
height: 70px;
line-height: 70px;
background-image: linear-gradient(45deg,gray,white);
border-radius: 10px;
box-shadow: 0 0 2px;
font-size: 30px;
}
.guide{
display: flex;
justify-content: space-around;
margin: 0 100px;
}
.guide a {
display: block;
text-align: center;
width: 90px;
height: 40px;
line-height: 40px;
border-radius: 10px;
background-color: gray;
text-decoration: none;
color: white;
font-size: 18px;
letter-spacing: 5px;
}
.guide a.active{
background-color: #64967E;
color: #ffc268;
font-weight: 900;
text-shadow: 0 0 1px black;
font-family: 微软雅黑;
}
.content{
margin: 0 auto;
margin-top: 30px;
border-radius: 10px;
width: 90%;
height: 400px;
border: 1px solid;
}
</style>

复制代码

解释都写在代码上了，style是样式，抄一下就行，之后会专门写一篇来说怎么写htmlcss样式。html结构看不懂的话可以去看html标记大全链接，是配套这个博客的辅助工具。
此处重要的是我们要引入import { RouterView } from 'vue-router';用来占位来显示我们的页面。
5.自定义路由名

在创建路由器的时候，我们可以多设置一项name，我们可以依次为跳转标识。

至此，我们有三种方法可以跳转，字符串，name和path，以后多用后两种写法，他们更方便传参。

效果展示

点击后会切换网址。

我们可以看到，在点击了RouterLink标签的按钮之后，路径发生了变化，页面组件也发生了变化，这就是路由的一个基本流程。
注：点击切换网页后，路由组件挂载，切换走就卸载了，在使用生命周期函数的时候不要用错了。
二、路由模式

1.history模式

优势： URL美观，不带#，靠近传统网站的URL
缺点：项目上线后，必要服务端共同处理路径问题，否则会有刷新404
写法：
在文件开头引入

import { createWebHistory } from "vue-router";

复制代码

在路由器创建中加入设置项

history:createWebHistory(),

复制代码

2.hash模式

写法：

import { createWebHashHistory } from "vue-router";
history:createWebHushHistory(),

复制代码

优点：兼容性好，不消服务器额外处理路径
缺点：不美观，SEO优化差
3.模式使用保举

如果你要建立的是面向大众的，好比b站，建议使用history模式。
如果是做专用项目，大概自己留档的，无所谓是否要在搜索引擎上找到你的，建议使用hash模式，对个人开辟者更友爱，省事。背景管理项目也最好用hash，主打一个稳。
综上，除非你已经做大做强了，不然建议用hash模式。
三、嵌套路由

1.基本嵌套

有时候，一级路由下面还有路由，一个最简朴的应用，一级路由让我新闻区，然后二级路由选择哪个新闻
我们必要在创建路由器的时候加入子路由设置。当然，与其他路由页一样，要先import，然后找到其父节点，写以下代码。