零基础Vue入门6——Vue router
本节重点：
- 路由定义
- 路由跳转
前面几节学习的都是单页面的功能（都在专栏里面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