Vue 3 路由教程

ops/2024/11/29 23:37:44/

Vue 3 路由教程

1. 路由基础概念

1.1 什么是路由?

路由是现代单页面应用(SPA)中管理页面导航的核心机制。在Vue 3中,我们主要使用vue-router库来实现路由功能。路由允许您在应用程序中无需重新加载整个页面就可以动态切换视图。

1.2 安装vue-router

使用npm安装vue-router:

npm install vue-router@4

2. 基本路由配置

2.1 创建路由实例

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
]const router = createRouter({history: createWebHistory(),routes
})export default router

2.2 在main.js中注册路由

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')

3. 路由跳转方法

3.1 声明式导航

在模板中使用<router-link>

<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

3.2 编程式导航

在组件的方法中使用router.push()

// 字符串路径
this.$router.push('/about')// 对象形式
this.$router.push({ path: '/about' })// 带参数
this.$router.push({ path: '/user', query: { id: 123 } 
})

4. 路由传参

4.1 动态路由

const routes = [// 动态路由参数{ path: '/user/:id', component: User }
]// 在组件中获取参数
const route = useRoute()
const userId = route.params.id

4.2 查询参数

// 传递查询参数
this.$router.push({ path: '/search', query: { keyword: 'vue' } 
})// 获取查询参数
const keyword = route.query.keyword

5. 高级路由技巧

5.1 嵌套路由

const routes = [{path: '/user',component: User,children: [{ path: 'profile', component: UserProfile },{ path: 'posts', component: UserPosts }]}
]

5.2 命名视图

const routes = [{path: '/',components: {default: Home,sidebar: Sidebar,content: MainContent}}
]

5.3 路由守卫

router.beforeEach((to, from, next) => {// 全局前置守卫if (to.meta.requiresAuth) {// 检查登录状态if (!isAuthenticated()) {next('/login')} else {next()}} else {next()}
})

6. 常见问题与最佳实践

6.1 处理404页面

const routes = [// 其他路由...{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }
]

6.2 路由懒加载

const routes = [{ path: '/about', component: () => import('./components/About.vue') }
]

结语

Vue 3路由提供了强大且灵活的导航机制。通过合理使用路由,您可以创建更加动态和用户友好的单页面应用。


http://www.ppmy.cn/ops/137773.html

相关文章

如何将 GitHub 私有仓库(private)转换为公共仓库(public)

文章目录 如何将 GitHub 私有仓库转换为公共仓库步骤 1: 登录 GitHub步骤 2: 导航到目标仓库步骤 3: 访问仓库设置步骤 4: 更改仓库可见性步骤 5: 确认更改步骤 6: 验证更改注意事项 如何将 GitHub 私有仓库转换为公共仓库 在软件开发领域&#xff0c;GitHub 是一个广受欢迎的…

【CSP CCF记录】201809-2第14次认证 买菜

题目 样例输入 4 1 3 5 6 9 13 14 15 2 4 5 7 10 11 13 14 样例输出 3 思路 易错点&#xff1a;仅考虑所给样例&#xff0c;会误以为H和W两人的装车时间是一一对应的&#xff0c;那么提交结果的运行错误就会让你瞬间清醒。 本题关键是认识到H和W的装车时间不一定一一对应&…

|| 与 ??的区别

?? : 空值合并运算符&#xff0c; 用于在左侧操作数为 null 或 undefined 时返回右侧操作数 let name null // null 或者 undefinedlet defaultName defaultNamelet displayName name ?? defaultNameconsole.log(displayName) // defaultName || : 逻辑或&#xff0c;…

Wonder3D本地部署到算家云搭建详细教程

Wonder3D简介 Wonder3D仅需2至3分钟即可从单视图图像中重建出高度详细的纹理网格。Wonder3D首先通过跨域扩散模型生成一致的多视图法线图与相应的彩色图像&#xff0c;然后利用一种新颖的法线融合方法实现快速且高质量的重建。 本文详细介绍了在算家云搭建Wonder3D的流程以及…

如何利用蓝燕云零代码平台构建工程企业成本控制系统?

随着工程项目管理逐步走向数字化&#xff0c;企业对成本控制的精细化需求不断提升。利用蓝燕云零代码平台&#xff0c;可快速构建一套高效、智能的成本控制系统&#xff0c;实现从预算编制到分析决策的全流程管理。 一、核心功能模块 1. 预算与成本管理 预算编制&#xff1a;…

Github 基本使用学习笔记

1. 基本概念 1.1 一些名词 Repository&#xff08;仓库&#xff09; 用来存放代码&#xff0c;每个项目都有一个独立的仓库。 Star&#xff08;收藏&#xff09; 收藏你喜欢的项目&#xff0c;方便以后查看。 Fork&#xff08;克隆复制项目&#xff09; 复制别人的仓库&…

python计算stable-diffusion-1.5模型参数量以及该模型每一层网络的参数量【其他LLM模型也有参考意义】

最近在计算stable-diffusion-1.5模型参数量上花了点心思&#xff0c;总结了一些方法&#xff0c;一起学习&#xff1a; stable-diffusion-1.5模型结构 首先stable-diffusion-1.5模型主要有三个关键组件&#xff08;text_encoder,unet,vae&#xff09;&#xff0c;关于stable-…

鸿蒙学习统一上架与多端分发-快速上架(1)

文章目录 1 快速上架1.1证书颁发1.2 统一上架1.3 上架审核HUAWEI AppGallery Connect 为开发者提供全球化、全场景一站式应用分发能力,并为开发者提供质量、安全、工程管理等领域的能力,大幅降低应用开发与运维难度,提升版本质量,帮助开发者获得用户并实现收入的规模增长。…