本文共 2162 字，大约阅读时间需要 7 分钟。

Vue Router 基本使用指南

作为 Vue 开发者，熟悉 Vue Router 是必不可少的功能。以下将从安装、路由定义、跳转与传参、路由守卫以及路由懒加载等方面，简要介绍 Vue Router 的基本使用方法。

1. 安装

首先，需要安装 Vue Router。可以通过以下方式完成：

npm install vue-router

如果你已经使用了 Vue，建议直接通过包管理器安装即可，无需额外下载 Vue.js，只需在项目中使用 Vue Router 的相关代码即可。

2. 定义路由

在 Vue Router 中，路由的定义通常位于 router/index.js 文件中。以下是一个基本的路由定义示例：

import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'const routes = [  {    path: '/',    name: 'home',    component: Home  },  {    path: '/about',    name: 'about',    component: () => import('../views/About.vue')  },  {    path: '/dwp',    name: 'dwp',    component: () => import('../views/Dwp.vue'),    redirect: '/DWpNb',    children: [      {        path: '/dwp-nb1',        name: 'dwp-nb1',        component: () => import('../views/Dwp-1.vue'),        meta: {          title: 'dwp is beautiful'        }      }    ]  }]const router = new VueRouter({  routes})export default router

在 main.js 文件中，通常会将 Vue Router 导入并应用于 Vue 实例：

import Vue from 'vue'import App from './App.vue'import router from './router'Vue.config.productionTip = falsenew Vue({  router,  render: h => h(App)}).$mount('#app')

3. 跳转与传参

编程式跳转

可以通过 router.push 方法实现编程式跳转，并支持传参：

router.push('/about') // 跳转到 /aboutrouter.push('/about?dwp=nb') // 跳转到 /about 并传递参数 dwp=nb

在组件中，可以使用 this.$router.push：

this.$router.push({  path: 'clientsInfo',  query: { dwp: 'nb' }})

声明式跳转

使用 <router-link> 标签实现声明式跳转：

   
    跳转
   

4. 路由守卫

路由守卫用于在路由切换时执行特定操作。常见的有 beforeEnter、beforeUpdate 和 afterEnter 等钩子。

例如，定义一个简单的 beforeEnter 守卫：

router.beforeEnter((to, from, next) => {  console.log('进入路由:', to)  next()})

5. 路由懒加载

为了提升应用的初始加载速度，路由懒加载可以延迟加载未使用的组件。

import { lazyLoading } from 'vue-router'const routes = [  {    path: '/dwp',    component: lazyLoading(() => import('../views/Dwp.vue'))  }]

这样可以减少初始加载时间，提升用户体验。

6. 路由元信息

路由元信息可以用于存储额外的数据，如页面标题：

{  path: '/dwp-nb1',  name: 'dwp-nb1',  meta: {    title: 'dwp is beautiful'  }}

注意事项

• 在使用路由时，记得在 app.vue 中包含 <router-view></router-view> 组件，否则路由内容无法显示。
• 路由路径尽量使用前缀匹配，避免路径冲突。
• 在开发环境中，建议开启 Vue Router 的调试模式，方便调试路由问题。

通过以上方法，应该能够快速上手并使用 Vue Router 实现路由功能。如果需要更详细的文档，可以参考 Vue Router 的官方文档：https://router.vuejs.org/zh/guide/。