文登区建设局网站免费个人建站系统
本节重点：
- 路由定义
- 路由跳转
前面几节学习的都是单页面的功能（都在专栏里面https://blog.csdn.net/zhanggongzichu/category_12883540.html），涉及到项目研发都是有很多页面的，这里就需要用到路由（vue router）。学习本节之后就可以写一个小型的项目了。
跟着练习一定带你可以上手开发vue项目。
我在gitcode上也建了了对应的vue学习项目，会跟随我的专栏进行定期代码更新，有需要可以克隆下载GitCode - 全球开发者的开源社区,开源代码托管平台
Vue Router
Vue Router 是 Vue.js 的官方路由。功能包括：
- 路由跳转、传参、查询、通配符
- 嵌套路由
- 动态路由
- 路由切换过滤效果
- HTML5 history 模式或 hash 模式
- .......
入门项目开发，可以先从掌握基础的路由跳转开始。
浏览器url上 / 之后的就是页面路由，？后面的就是页面传递的参数，多层的/就是嵌套路由的概念。例如：
所谓客户端路由，就是把你应用中的页面和浏览器的URL绑定起来，实现：
用户浏览不同页面——URL更新——组件更新。
通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。
例如下面的例子，有3个页面通过一个导航来切换不同的页面。
路由定义
想要实现上述效果，第一步创建一个路由实例，在你项目的src目录下面新建router文件夹，之后新建一个index.ts文件。
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/home/index.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'index',redirect: '/home',},{path: "/home",name: "home",component: Home,children: [{path: 'homeLayout',name: '首页',component: () => import('@/views/home/HomeView.vue')},{path: 'vue01',name: '第一节',component: () => import('@/views/vue01/index.vue')},{path: 'vue02',name: '第二节',component: () => import('@/views/vue02/index.vue')}]}],
})export default router
上面就定义了一个嵌套路由，/home就是项目的入口文件，/home/homeLayout就是首页，以此类推。其中：
-
routes选项定义了一组路由，把 URL 路径映射到组件 component参数指定要渲染的组件- 在main.ts中注册路由
- 在
App.vue中添加路由渲染容器组件<RouterView>渲染
这些路由组件通常被称为视图，本质上它们只是普通的 Vue 组件。
路由的不同历史模式
- Hash模式：用
createWebHashHistory()创建， URL 之前使用了一个井号（#） - HTML5模式：用
createWebHistory()创建 ，URL 会看起来很 "正常"，官网也比较推荐这种模式。
路由访问
在首页定义了一个导航
- 导航跳转（也就是声明式路由）可以使用routerLink组件的to属性定义
- 通过方法跳转（也就是编程式路由）的话可以使用router.push('对应的路由url')方法实现
<template><div class="ln_container"><nav><RouterLink v-for="item in menu" :to="item.path">{{ item.name }}</RouterLink></nav><div class="ln_main"><RouterView /></div></div>
</template><script setup lang="ts">
import { RouterLink, RouterView,useRouter } from 'vue-router';
import { ref,watch } from 'vue';const menu = ref([{name: '首页',path: '/',},{name: 'vue01',path: '/home/vue01',}, {name: 'vue02',path: '/home/vue02',},
]);const router = useRouter();
// 监听路由变化，如果跳转到/home,则跳转到/home/homeLayout
watch(() => router.currentRoute.value.path, (to) => {if (to === '/home') {router.push('/home/homeLayout');}
}, { immediate: true });</script><style scoped lang="scss">
.ln_container {width: 100%;height: 100%;nav {display: flex;padding: 10px;font-size: 16px;border-bottom: 1px solid #e0e0e0;margin-bottom: 10px;a {display: inline-block;padding: 10px;line-height: 20px;text-decoration: none;color: #333333;&:hover{background-color: #f0f0f0;}}}
}nav a:first-of-type {border: 0;
}.ln_main {padding: 10px;
}
</style>
通过 useRouter() 和 useRoute() 来访问路由器实例和当前路由。
常用api
重定向 redirect
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]路由传参params
// 定义
const routes = [{ path: '/users/:id', component: User },
];// 使用<template><div>User {{ router.params.id }}</div>
</template>导航守卫
简单项目基本这些就够用了，项目要求比较高的话，例如需要检查用户是否已经登录，没有登录的需要先跳转到登录页等等权限方面的需求的，就需要用到导航守卫了。
router.beforeEach(async (to, from) => {if (// 检查用户是否已登录!isAuthenticated &&// ❗️ 避免无限重定向to.name !== 'Login') {// 将用户重定向到登录页面return { name: 'Login' }}})更多路由导航学习：导航守卫 | Vue Router
路由切换过渡效果：过渡动效 | Vue Router
404页面
如果客户在浏览器上写了一个没有对应路由的url，怎么显示呢？可以提供一个默认的没找到的页面，匹配所有未找到路径的页面。
const router = createRouter({history: createWebHistory(),routes: [{...},// 正常的路由页面{ path: '/:pathMatch(.*)', // 未匹配的页面component: NotFoundComponent }
],
})以上就是全部内容了。
若碰到其他的问题 可以私信我 一起探讨学习
如果对你有所帮助还请 点赞 收藏 谢谢~！
关注收藏博客 持续更新中。
从零开始轻松掌握Vue.js，欢迎订阅我的博客专栏！https://blog.csdn.net/zhanggongzichu/category_12883540.html?utm_medium=notify.im.notify-business-fans.20250124.a&username=zhanggongzichu