Vue 3 路由机制详解与实践

devtools/2024/11/14 14:56:38/

一、路由的理解

路由是指导用户界面导航的一种机制。它通过映射 URL 到应用程序的不同视图组件来实现页面间的切换和导航。

二、路由基本切换效果

路由基本切换效果指的是当用户在应用程序中进行页面导航时，通过路由可以实现页面的切换，从而展示不同的视图组件。

VUE文件

<template><h1 class="title">Vue路由测试</h1><div class="actives"><RouterLink to="/home" active-class="activeclass" class="active"  tag="button">首页</RouterLink><RouterLink to="/home" tag="button" class="button-link">码农</RouterLink><RouterLink :to="{ path: '/news' }" active-class="activeclass" class="active">新闻</RouterLink><RouterLink :to="{ name: '关于' }" active-class="activeclass" class="active">关于</RouterLink></div><div class="routerbox"><RouterView></RouterView></div>
</template><script lang="ts" setup name="Person">javascript">
import { RouterLink, RouterView } from 'vue-router'
import { ref, reactive, watch, onMounted } from 'vue';
</script>
</script>
<style lang='scss' scoped>
h1 {text-align: center;
}.actives {display: flex;justify-content: space-evenly;.button-link {display: inline-block;padding: 8px 16px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;text-decoration: none;cursor: pointer;font-size: 16px;}.active {background-color: #808080;color: #fff;text-decoration: none;width: 100px;height: 50px;border-radius: 10%;text-align: center;line-height: 50px;font-size: 20px;}.active:hover {background-color: #354139;color: #ECC980;}.activeclass {background-color: #354139;color: #ECC980;text-decoration: none;width: 100px;height: 50px;border-radius: 10%;text-align: center;line-height: 50px;font-size: 20px;}
}.routerbox {margin: 0 auto;margin-top: 20px;width: 80%;height: 200px;border: 1px solid #000;border-radius: 10px;padding: 20px;
}
</style>

manin.ts文件

// 创建一个路由器，并暴露出去
//第一步:引入createRouter
import { createRouter, createWebHistory } from 'vue-router'//引入一个一个要呈现组件
import Home from '@/views/Home.vue'
import News from '@/views/News.vue'
import About from '@/views/About.vue'// 第二步:创建路由器
const router = createRouter({history: createWebHistory(),//路由器的工作模式routes: [//一个一个的路由规则{// 将默认路由重定向到 '/home'path: '/',name: '首页',redirect: '/home'},{path: '/home',name: '首页',component: Home},{path: '/news',name: '新闻',component: News},{path: '/about',name: '关于',component: About}]
})export default router

main.ts

//引入createApp用于创建应用
import { createApp } from 'vue'
//引入App根组件
import App from './App.vue'
// 引入路由器
import router from './route/route'//创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到app容器中
app.mount('#app')

在这里插入图片描述

三、路由的两个注意点

1.路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
2.通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

四、路由器工作模式

1.history模式

优点:

  • URL 更加美观,不带有 #,更接近传统网站 URL
  • 利于 SEO 优化

缺点:

  • 后期项目上线,需要服务端配合处理路径问题,否则刷新会有 404 错误
const router = createRouter({history:createWebHistory(), //history模式})

网址显示：http://localhost:5173/home

  1. hash模式

优点:

  • 无需服务端配合,即可运行
  • 兼容性更好

缺点:

  • URL 带有 #,不太美观
  • 对 SEO 优化相对较差
const router = createRouter({history:createWebHashHistory(), //hash模式})

网址显示：http://localhost:5173/#/home

⭐不同点在于有无/#

五、路由 to 的两种写法

在 Vue 3 + TypeScript 中，可以使用对象字面量或者字符串形式来指定 to 属性。

对象字面量：to="{ name: 'Home' }"
字符串形式：to="/home"

六、路由命名路由

命名路由是指为特定路由指定一个名称，以便在代码中引用。这样做有助于在应用程序中进行路由导航时更清晰地指定目标路由。

javascript">// 创建路由器
const router = createRouter({history: createWebHistory(),//路由器的工作模式routes: [//一个一个的路由规则{// 将默认路由重定向到 '/home'path: '/',redirect: '/home'},{path: '/home',name: '首页',component: Home},{path: '/news',name: '新闻',component: News},{path: '/about',name: '关于',component: About}]
})
export default router

七、路由嵌套路由

路由嵌套是指在一个路由下定义子路由，通过这种方式可以构建复杂的页面结构和导航层次。

  1. 编写News的子路由：Detail.vue
  2. 配置路由规则，使用children配置项：
const router = createRouter({history: createWebHistory(),//路由器的工作模式routes: [//一个一个的路由规则{path: '/news',name: '新闻',component: '@/views/News.vue',children: [{path: '/detal',component: '@/views/detal.vue'}]}]
})
export default router
  1. 跳转
<li v-for="item in newsList" :key="item.id"><RouterLink to="/news/detal" :active-data="item">{{ item.title }}</RouterLink>
</li>
  1. 记得去news组件中预留一个<router-view>
<template><div class="flex"><div class="news"><ul><li v-for="item in newsList" :key="item.id"><RouterLink to="/news/detal">{{ item.title }}</RouterLink></li></ul></div><div class="router-content"><RouterView></RouterView></div></div>
</template>
<script setup lang="ts" name="News">javascript">
import { ref, reactive, watch, onMounted } from 'vue';
import { RouterLink, RouterView } from 'vue-router';
const newsList = ref([{ id: 1, title: '标题1', content: '内容1' },{ id: 2, title: '标题2', content: '内容2' },{ id: 3, title: '标题3', content: '内容3' },{ id: 4, title: '标题4', content: '内容4' },{ id: 5, title: '标题5', content: '内容5' },
])
</script>
<style lang='scss' scoped>
.flex {display: flex;justify-content: flex-start;.news {ul {margin: 0;padding: 0 10px 0 0;li {list-style-type: none;a {text-decoration: none;}}}}.router-content {width: 80%;border-radius: 10px;padding: 5px;border: #000 solid 1px;}
}
</style>

八、路由传参

  1. 路由 query 参数
    Query 参数是指在 URL 中以 ? 开头的参数，用于传递额外的信息给路由目标组件。在 Vue 3 + TypeScript 中，可以通过 $route.query 来获取这些参数。

1.query参数

（1）传递参数

<!-- 方式一：跳转并携带query参数（to的字符串写法） -->
<RouterLink :to="`/news/detail?id=${item.id}&title=${item.title}&content=${item.content}`">{{ item.title }}
</RouterLink><!-- 方式二：跳转并携带query参数（to的对象写法） -->
<RouterLink :to="{path: '/news/detail',query: {id: item.id,title: item.title,content: item.content}
}">{{ item.title }}</RouterLink>

（2）接收参数：

import { ref, watchEffect, toRefs } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
let { query } = toRefs(route)

（3）路由配置


const router = createRouter({history: createWebHistory(),//路由器的工作模式routes: [{path: '/news',name: '新闻',component: News,children: [{name:'detail',path: '/news/detail',component: Detal}]}
])export default router

2.params参数

Params 参数是指在 URL 中使用动态路由参数的一种方式，通过这种方式可以在路由之间传递数据。在 Vue 3 + TypeScript 中，可以通过 $route.params 来获取这些参数。

（1）传递参数

<!-- 第一种方法 -->
<RouterLink :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{ item.title }}</RouterLink><!-- 第二种方法 -->
<RouterLink :to="{name: 'detail',params: {id: item.id,title: item.title,content: item.content,}
}">{{ item.title }}</RouterLink>

（2）接收参数

import { toRefs } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
let { params } = toRefs(route)
console.log(params.value);

（3）路由配置

const router = createRouter({history: createWebHistory(),//路由器的工作模式routes: [{path: '/news',name: '新闻',component: News,children: [{name:'detail',path: '/news/detail/:id/:title/:content?',//id和title参数是必须的，但content参数可以省略component: Detal}]}
])export default router

注意：

备注1：传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。
备注2：传递params参数时，需要提前在规则中占位。

九、路由 props 配置

让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

（1）传递参数

const router = createRouter({history: createWebHistory(),//路由器的工作模式routes: [//一个一个的路由规则{path: '/news',name: '新闻',component: News,children: [{name:'xiang',path:'detail/:id/:title/:content',component:Detail,​  // ⭐⭐第一种写法:将路由收到的所有params参数作为props传给路由组件props: true,// ⭐⭐第二种写法:函数写法，可以自己决定将什么作为props给路由组件props(route) {return route.query}// 第三种写法（几乎用不到）:对象写法，可以自己决定将什么作为props给路由组件props :{id:1,title:'标题',content:'内容'}]}]
})
export default router

等同于 <Detail :id="1" :title="标题" :content="内容" /> 这样的 prop传值

（2）接收参数

<template><div>编号：{{ id }}标题：{{ title }}内容：{{ content }}</div>
</template><script lang="ts" setup name="Person">javascript">defineProps(['id','title','content',])
</script>

十、路由 replace 属性

replace 属性是指在导航时替换当前路由历史记录而不是添加新记录。在某些情况下，使用 replace 可以更好地管理路由历史。

  1. 作用：控制路由跳转时操作浏览器历史记录的模式。
  2. 浏览器的历史记录有两种写入方式：分别为push和replace：
  • push是追加历史记录（默认值）。
  • replace是替换当前记录。
  1. 开启replace模式路由跳转时加了replace的路由，导航就不会留下历史记录
<RouterLink replace .......>News</RouterLink>

十一、路由编程式路由导航

编程式路由导航是指通过 JavaScript 代码来进行页面导航，可以在组件方法中使用 $router 对象来实现。

<template><div><button @click="navGetTo()">点我跳转新闻页</button></div>
</template>
<script lang="ts" setup name="Person">javascript">
import { useRouter } from 'vue-router';
const router = useRouter()function navGetTo() {router.push('/news')
}
</script>

应用场景：

符合条件跳转，登陆成功跳转个人主页、整点秒杀跳转鼠标滑过跳转等等

十二、路由重定向

路由重定向是指当用户访问某个特定路径时自动将其重定向到另一个路径，通常用于处理用户访问的旧路径或者错误路径。

 {// 将默认路由重定向到 '/home'path: '/',redirect: '/home'}

http://www.ppmy.cn/devtools/18363.html

相关文章

mac配置maven

mac配置maven

在 macOS 上配置 Maven 也相对简单。以下是一种常用的方法&#xff1a; 1. 安装maven **下载 Maven&#xff1a;**首先&#xff0c;你需要从 Maven 官网&#xff08;https://maven.apache.org/download.cgi&#xff09;下载最新版本的 Maven。你可以选择二进制压缩包&#xf…
阅读更多...
电机入门1

电机入门1

文章目录 122.12.22.3 33.13.23.33.4 1 2 2.1 电机板 驱动板电机分类 驱动器分类 转速 转向扭矩定时器 ADC 2.2 PID 自动控制 的核心闭环控制算是 PID的应用 2.3 无刷电机用的 可大大提高其控制效率 和控制精度 3 开发板的IO 电流太小了 20~25ma 电机要A 驱动板 信号放大没舵…
阅读更多...
面试宝典（1）——数据库篇（MySQL）

面试宝典（1）——数据库篇（MySQL）

面试宝典&#xff08;1&#xff09;——数据库篇&#xff08;MySQL&#xff09; 1.什么是索引&#xff1f; 索引是一种用于加快数据库查询速度的数据结构。 索引可以帮助数据库快速定位到数据库表中特定列的记录&#xff0c;从而加快数据检索和查询的速度。 通过在表的列上…
阅读更多...
MAC如何重装系统（怒冲30大洋，才拿到的教程～，收藏点赞兄弟们）

MAC如何重装系统（怒冲30大洋，才拿到的教程～，收藏点赞兄弟们）

背景 应该是之前装了一些远程的软件&#xff0c;卸载一直不干净&#xff0c;导致电脑很卡&#xff0c;而且网络貌似出现了问题&#xff0c;钉钉直接登陆不上了。其余软件网络倒是还好。所以就去PDD&#xff0c;买了个教程&#xff0c;重装了一下。才发现是mac自带&#xff0c;…
阅读更多...
机器学习day2

机器学习day2

一、KNN算法简介 KNN 算法&#xff0c;或者称 k最邻近算法&#xff0c;是 有监督学习中的分类算法 。它可以用于分类或回归问题&#xff0c;但它通常用作分类算法。 二、KNN分类流程 1.计算未知样本到每一个训练样本的距离 2.将训练样本根据距离大小升序排列 3.取出距离最近…
阅读更多...
leetcode hot100_part25

leetcode hot100_part25

2024/4/23 56.合并区间 略 189.轮转数组 使用额外数组 遍历老数组&#xff0c;每个位置的元素放到新数组的位置&#xff08;取余&#xff09;。 环状替换 这个思路也想到了但是没想出来。 也就是连续跳&#xff0c;从i位置跳到它应该在(取余后)的位置x&#xff0c;再从x位…
阅读更多...
信号的调幅（AM）、调频（FM）与调相（PM）对频谱结构的影响（找找复刻电赛D题的伙伴）

信号的调幅（AM）、调频（FM）与调相（PM）对频谱结构的影响（找找复刻电赛D题的伙伴）

0.目录 &#xff08;1&#xff09;调制与解调的基本概念 &#xff08;2&#xff09;调幅对频谱结构的影响 &#xff08;3&#xff09;调频信号幅值变化对频谱结构的影响 &#xff08;4&#xff09;调频信号频率变化对频谱结构的影响 &#xff08;5&#xff09;调幅调频信号…
阅读更多...
【Linux】小知识点温习---命令

【Linux】小知识点温习---命令

许多常见命令会用&#xff0c;但是很少注意他们的区别&#xff1b;亦或在学习中使用较少&#xff0c;容易忘记&#xff0c;今天做一个回顾。 ls系列 -a:显示所有文件&#xff08;包括隐藏文件&#xff09; -l:将文件以竖列形式显示 -i&#xff1a;显示文件的inode编号 pwd 显…
阅读更多...
最新文章

Copyright @ 2022~2023