在现代Web应用中,路由是必不可少的。Vue Router是Vue.js的官方路由管理器,它让我们可以构建单页应用(SPA),实现页面之间的导航而不需要刷新整个页面。
Vue Router提供了声明式的路由配置、嵌套路由、路由参数、路由守卫等功能。现在让我们来学习Vue Router的用法,了解如何配置路由、实现导航、处理路由参数,以及如何使用路由守卫。

Vue Router是Vue.js的官方路由管理器。它让我们可以:
让我们先看一个简单的例子,理解Vue Router的基本用法。由于Vue Router需要通过npm安装,在CDN环境下使用比较复杂,我们这里主要介绍概念和用法,实际项目中使用Vite等构建工具会更方便。
在使用Vue Router之前,我们需要先安装它。如果使用Vite等构建工具,可以通过npm安装:
|npm install vue-router@4
如果使用CDN,可以引入Vue Router的CDN链接:
|<script src="https://unpkg.com/vue-router@4/dist/vue-router.global.js"></script>
下面是如何进行基本的路由信息配置:
|<div id="app"> <router-view></router-view> </div> <script> const { createApp } = Vue; const { createRouter, createWebHistory } = VueRouter; // 定义路由组件 const Home = { template: '<div><h1>首页</h1><p>欢迎来到首页</p></div>' }; const About = { template: '<div><h1>关于</h1><p>这是关于页面</p></div>' }; // 定义路由规则 const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; // 创建路由实例 const router = createRouter({ history: createWebHistory(), routes }); // 创建应用实例并挂载路由 const app = createApp({}); app.use(router); app.mount('#app'); </script>
在这个例子中,我们定义了两个路由:/对应Home组件,/about对应About组件。<router-view>是路由出口,用于显示当前路由对应的组件。
Vue Router提供了两种方式进行路由导航:声明式导航和编程式导航。
在Vue Router中,声明式导航是通过<router-link>组件来实现的。<router-link>用于生成带有路由跳转功能的链接。当用户点击这些链接时,页面会自动根据设置的路由切换到对应的组件页面,而不会重新加载整个页面。你可以为<router-link>的to属性指定跳转的路径,还可以通过设置active-class修改激活时的样式类。例如:
|<div id="app"> <nav> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> </nav> <router-view></router-view> </div> <script> const {
<router-link>会渲染成<a>标签,点击时会导航到指定的路由。当前激活的路由会自动添加router-link-active类。
编程式导航是通过在代码中调用路由实例的方法(如router.push()、router.replace()等)来实现路由跳转的。这种方式常用于需要在事件处理函数、条件判断或异步操作后进行路由跳转的场景。例如,当用户完成表单提交或需要在逻辑判断后自动跳转页面时,就可以使用编程式导航。
常用的方式有:
router.push(location): 导航到新的路由,类似于点击<router-link>。参数可以是路径字符串(如'/about'),也可以是一个包含路径和参数的对象。router.replace(location): 与push类似,但不会在历史记录中留下新条目,常用于替换当前页面。router.go(n): 在浏览历史中向前或向后跳转n步。例如:
|// 跳转到首页 router.push('/'); // 跳转到关于页面 router.push({ path: '/about' }); // 用replace方式跳转,不产生新历史记录 router.replace('/about');
这种编程式方式适合在方法、回调、事件处理等需要主动进行页面跳转的地方使用。
|<div id="app"> <nav> <button @click="goToHome">首页</button> <button @click="goToAbout">关于</button> </nav> <router-view></router-view> </div> <script> const {
在Vue 3的组合式API(Composition API)中,如果我们想要在setup()函数里访问和操作路由实例,可以使用useRouter函数。它可以让我们获取当前应用的router实例,从而进行编程式导航(如跳转页面)、访问路由信息等。
比如,如果你希望在点击按钮时跳转到首页,可以这样做:
|import { useRouter } from 'vue-router'; export default { setup() { const router = useRouter(); // 获取路由实例 const goToHome = () => { router.push('/'); // 跳转到首页 }; return { goToHome, }; } }
同理,如果还需要跳转到其它页面,只需调用router.push()方法并传入对应的路径即可。useRouter只能在setup()或<script setup>等组合式API相关的地方使用,不能在组件外部或普通函数里直接调用。
|<script> const { createApp } = Vue; const { createRouter, createWebHistory, useRouter } = VueRouter; const app = createApp({ setup() { const router = useRouter(); const goToHome = () => { router.
我们可以通过路由参数传递数据。有两种方式:路径参数和查询参数。
路径参数(params)是URL路径中的动态部分,用于在路由中传递变量。你可以在路由地址中声明路径参数,通常以冒号(:)开头。例如,路径 /user/:id 中的 :id 就是一个路径参数。这样,访问 /user/123 时,id 会自动解析为 '123',并可以在组件中通过 route.params.id 获取对应的参数值。
|<div id="app"> <router-view></router-view> </div> <script> const { createApp } = Vue; const { createRouter, createWebHistory, useRoute } = VueRouter; const User = { setup() {
在这个例子中,:id是路径参数。当我们访问/user/123时,route.params.id的值就是'123'。
查询参数(query parameters)是指URL中以问号(?)开始、使用键值对(key=value)形式表示的数据,并可通过&连接多个参数。例如,在URL /search?keyword=Vue&page=1 中,keyword=Vue 和 page=1 就是查询参数。
查询参数通常用于向页面传递过滤、分页等信息,可以在Vue路由中通过 route.query 对象来访问这些参数。例如:
|<div id="app"> <router-view></router-view> </div> <script> const { createApp } = Vue; const { createRouter, createWebHistory, useRoute } = VueRouter; const Search = { setup() {
当我们访问/search?keyword=Vue&page=1时,route.query.keyword的值是'Vue',route.query.page的值是'1'。
嵌套路由是指在父路由组件内部再定义子路由,让不同的子路由渲染到父组件中的 <router-view> 里。这样可以让多个路由层级在页面结构上呈现嵌套关系。
使用嵌套路由时,父组件通常会包含一个 <router-view>,用于展示其子路由对应的组件。例如 /user 是一个父路由,它可以有个人资料(/user/profile)和文章列表(/user/posts)等子路由。这样,不同的子页面会在父用户页内切换显示。
|<div id="app"> <router-view></router-view> </div> <script> const { createApp } = Vue; const { createRouter, createWebHistory } = VueRouter; const User = { template: ` <div>
在这个例子中,User组件内部有子路由。子路由的路径是相对于父路由的,所以profile的完整路径是/user/profile。
路由守卫用于在路由导航过程中执行一些操作,比如权限检查、数据加载等。
beforeEach是 Vue Router 的全局前置守卫(Global Before Guard),它会在每一次路由跳转前被调用。你可以在这里执行一些逻辑,例如:检查用户是否已经登录、动态修改页面标题、权限校验、数据预加载等。beforeEach 接收三个参数:
to:即将要进入的目标路由对象。from:当前导航正要离开的路由对象。next:必须调用该方法来 resolve 这个钩子。可以通过 next()放行,next('/login')重定向,或 next(false)取消导航。全局前置守卫的应用非常广泛。例如,常用来做身份验证——只有登录用户才可以访问某些路由,未登录用户将被重定向到登录页。
示例说明:
|router.beforeEach((to, from, next) => { // to: 目标路由对象 // from: 当前路由对象 // next: 控制是否通过导航或重定向 const isAuthenticated = checkAuth(); // 假设这是检查是否登录的函数 if (to.path === '/admin' && !isAuthenticated) { // 如果要进入 admin 页面且未登录,跳转到登录页 next('/login'); } else { // 其他情况直接放行 next();
这样能够保证所有需要登录的页面都先经过统一的身份校验。
|<script> const router = createRouter({ history: createWebHistory(), routes }); router.beforeEach((to, from, next) => { // to: 目标路由 // from: 当前路由 // next: 控制导航的函数 // 检查是否需要登录 const isAuthenticated = checkAuth(); // 假设这是一个检查登录的函数
除了在全局注册路由钩子以外,我们还可以直接在单个组件内部定义路由守卫。Vue 提供了三种组件内守卫钩子函数,分别用于在不同的路由导航流程中执行自定义逻辑:
beforeRouteEnter(to, from, next):在路由进入前调用,此时组件实例还未被创建,无法访问 this,可以在导航确认前进行异步数据获取或权限检测。beforeRouteUpdate(to, from, next):当当前路由改变,但该组件被复用时调用,可以访问 this,适合根据路由参数的变化更新组件数据。beforeRouteLeave(to, from, next):导航离开当前组件对应的路由时调用,可用于导航离开前的确认或收尾工作,例如弹窗提示未保存更改。|<script> const UserProfile = { beforeRouteEnter(to, from, next) { // 在进入路由之前执行 // 此时组件实例还未创建,无法访问this loadUserData(to.params.id).then(() => { next(); }); }, beforeRouteUpdate(to, from, next) { // 在当前路由改变,但组件被复用时执行 // 可以访问this this
在 Vue 路由配置中,我们可以通过在每个路由对象中添加 meta 字段,为该路由设置自定义的元信息。这些元信息可以用于存储任何辅助数据,比如权限控制、页面标题、面包屑、动画标识等。
meta 字段是一个普通对象,其内容不会影响路由功能,但可以在路由守卫或组件中根据需要读取和使用。例如,可以根据 meta.requiresAuth 判断是否需要登录权限后再进入页面,或者根据 meta.title 动态设置页面标题。
|<script> const routes = [ { path: '/admin', component: Admin, meta: { requiresAuth: true, title: '管理后台' } } ]; router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated
下面我们通过一个更加详细的综合示例,来帮助大家理解和实践前面学到的 Vue Router 相关知识。在这个示例中,我们将搭建一个简单的博客应用,涵盖以下内容:
beforeEach)拦截路由,实现简单的权限控制。<router-link> 实现页面间导航,并通过 <router-view> 渲染对应组件。通过这个例子,大家可以全面体会到 Vue Router 的基础用法及实际开发中的典型场景。
|<div id="app"> <nav> <router-link to="/">首页</router-link> <router-link to="/posts">文章列表</router-link> <router-link to="/about">关于</router-link> </nav> <router-view></router-view>
在实际项目中,Vue Router通常与Vite等构建工具一起使用。使用构建工具可以更好地组织代码,支持单文件组件(.vue文件),提供更好的开发体验。
在这一节课中,我们学习了Vue Router的基本用法。我们了解了如何配置路由、实现导航、处理路由参数,以及如何使用路由守卫。 Vue Router是构建单页应用的重要工具。掌握它后,你就能构建出功能完整的单页应用。
在下一堂课,我们将学习Pinia,了解如何在Vue应用中进行状态管理。这将帮助我们更好的管理应用中的全局状态。