vue路由基础

### 路由的基本概念 在 Vue.js 中，路由是构建单页应用（SPA）的重要组成部分，它允许你在不同的视图之间进行切换，而无需重新加载整个页面。Vue Router 是 Vue.js 官方的路由管理器，它与 Vue.js 深度集成，提供了丰富的功能来管理应用的导航[^3]。 ### 安装 Vue Router 首先，你需要安装 Vue Router。如果你使用的是 Vue CLI 创建的项目，可以通过以下命令安装 Vue Router： ```bash npm install vue-router ``` ### 创建路由实例 在项目中创建一个路由实例，并将其挂载到 Vue 应用中。你需要定义路由的路径和对应的组件。以下是一个简单的示例： ```javascript // 引入 Vue 和 Vue Router import Vue from 'vue'; import Router from 'vue-router'; // 引入组件 import Home from './components/Home.vue'; import About from './components/About.vue'; // 使用 Vue Router Vue.use(Router); // 定义路由 const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; // 创建路由实例 const router = new Router({ routes // (缩写) 相当于 routes: routes }); // 挂载路由到 Vue 实例 new Vue({ router, // 其他选项 }).$mount('#app'); ``` ### 路由导航 在 Vue Router 中，你可以通过 `router-link` 组件进行导航。`router-link` 会渲染成一个 `<a>` 标签，默认情况下，它会自动添加 `active` 类到当前激活的链接上。 ```html <template> <div> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> <router-view></router-view> </div> </template> ``` ### 路由守卫 路由守卫是一种在导航过程中控制访问的机制。在 Vue.js 中，可以使用路由守卫来添加代码，以在路由导航之前、之后或期间执行特定的操作。常见的路由守卫有全局前置守卫、全局后置守卫、路由独享守卫和组件内的守卫。 #### 全局前置守卫 全局前置守卫是在每次导航之前触发的。你可以在这个钩子中执行一些全局的操作，例如权限验证。 ```javascript router.beforeEach((to, from, next) => { // 在这里执行一些操作 console.log('导航到:', to.path); next(); // 必须调用 next() 才能继续导航 }); ``` #### 全局后置守卫 全局后置守卫是在每次导航完成后触发的，通常用于记录页面访问日志等。 ```javascript router.afterEach((to, from) => { console.log('导航完成:', to.path); }); ``` ### 路由参数 你可以在路由路径中定义参数，以便在组件中使用这些参数。例如，定义一个带有参数的路由： ```javascript const routes = [ { path: '/user/:id', component: User } ]; ``` 在组件中，你可以通过 `$route.params.id` 访问这个参数。 ### 嵌套路由 Vue Router 还支持嵌套路由，允许你在父组件中嵌套子组件。你需要在父组件中使用 `<router-view>` 来渲染子路由。 ```javascript const routes = [ { path: '/user', component: User, children: [ { path: 'profile', component: Profile }, { path: 'posts', component: Posts } ] } ]; ``` ### 动态路由 动态路由是指在运行时动态添加或删除路由。你可以使用 `router.addRoute()` 方法动态添加路由。 ```javascript router.addRoute({ path: '/dynamic', component: Dynamic }); ``` ### 总结 通过以上步骤，你可以掌握 Vue.js 路由的基础知识。从基本的路由配置到路由守卫、参数传递和动态路由，这些都是构建复杂单页应用的关键要素。随着你对 Vue Router 的深入了解，可以进一步探索其高级特性，如懒加载、嵌套路由和路由元信息等。