零基础Vue入门6——Vue router

本节重点：

1. 路由定义
2. 路由跳转

前面几节学习的都是单页面的功能（都在专栏里面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 组件。

路由的不同历史模式

1. Hash模式：用 createWebHashHistory() 创建， URL 之前使用了一个井号（#）
2. 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