在Vue项目中使用路由简单指南或者全局守卫在main.js中添加全局前置守卫

作者：网络发烧程序猿 | 发布时间：2025-07-02 |

在Vue项目中使用路由的简单指南

一、安装Vue Router

得把Vue Router安装到你的项目中。你可以用npm或yarn来装：

```bash npm install vue-router # 或者 yarn add vue-router ``` 安装好之后，别忘了在项目中引入并使用它。

二、配置路由

接下来，要配置一下路由。创建一个新的文件，比如叫`router.js`，然后定义你的路由配置：

```javascript // router.js import Vue from 'vue'; import Router from 'vue-router'; import Home from '@/components/Home.vue'; Vue.use(Router); export default new Router({ routes: [ { path: '/', name: 'home', component: Home } ] }); ``` 然后在你的主Vue文件中引入并使用这个路由配置： ```javascript // main.js import Vue from 'vue'; import App from './App.vue'; import router from './router'; new Vue({ router, render: h => h(App) }).$mount('#app'); ```

三、在Vue组件中使用路由

配置好路由之后，你就可以在Vue组件中使用`router-link`和`router-view`来实现导航和页面展示了。

四、动态路由和嵌套路由

Vue Router还支持动态路由和嵌套路由，这能让你的应用更强大。

概念	示例
动态路由	用户详情页：/user/userId
嵌套路由	在User组件中展示嵌套路由内容：/user/userId/profile

五、导航守卫

导航守卫可以让你在路由切换前做点事情，比如做认证检查。

全局守卫：在main.js中添加全局前置守卫。
路由独享守卫：在路由配置中添加beforeEnter属性。
组件内守卫：在组件中使用beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave守卫。

六、路由懒加载

路由懒加载可以帮助你优化性能，按需加载组件。

```javascript // 使用动态import语法来实现路由懒加载 const Foo = () => import('./components/Foo.vue'); ```

七、总结

使用Vue Router可以在你的Vue项目中管理页面导航和组件展示。通过掌握这些技巧，你可以构建出功能强大且用户体验良好的单页面应用（SPA）。别忘了多加练习和应用这些技术，提升你的Vue开发技能。