第7章：路由管理

第18节：Vue Router基础

7.18.1 Vue Router 4.x安装与配置

Vue Router是Vue官方的路由管理库，用于实现单页面应用（SPA）的路由功能。Vue Router 4.x是Vue 3的官方路由库，与Vue 3完全兼容。

安装Vue Router 4.x

使用npm或yarn安装Vue Router 4.x：

# 使用npm
npm install vue-router@4

# 使用yarn
yarn add vue-router@4

# 使用pnpm
pnpm add vue-router@4

基本配置

创建一个路由配置文件，通常放在src/router/index.js：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

// 定义路由组件
const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')

// 定义路由规则
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

// 创建路由实例
const router = createRouter({
  // 使用HTML5历史模式
  history: createWebHistory(),
  // 路由规则
  routes
})

// 导出路由实例
export default router

在Vue应用中使用路由

在main.js中导入并使用路由：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

// 使用路由
app.use(router)

app.mount('#app')

7.18.2 路由视图与导航链接

Vue Router提供了两个核心组件：<router-view>和<router-link>，用于实现路由视图和导航链接。

路由视图 <router-view>

<router-view>组件用于显示当前路由匹配的组件：

<!-- App.vue -->
<template>
  <div id="app">
    <!-- 导航栏 -->
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    
    <!-- 路由视图，用于显示当前路由匹配的组件 -->
    <main>
      <router-view />
    </main>
  </div>
</template>

&lt;router-link&gt;组件用于创建导航链接，它会被渲染为&lt;a&gt;标签，但点击时不会刷新页面，而是通过JavaScript更新路由：

<template>
  <nav>
    <!-- 基本用法 -->
    <router-link to="/">Home</router-link>
    
    <!-- 使用name属性 -->
    <router-link :to="{ name: 'About' }">About</router-link>
    
    <!-- 使用query参数 -->
    <router-link :to="{ path: '/user', query: { id: 1 } }">用户详情</router-link>
    
    <!-- 使用params参数 -->
    <router-link :to="{ name: 'User', params: { id: 1 } }">用户详情</router-link>
    
    <!-- 替换当前历史记录 -->
    <router-link to="/about" replace>About</router-link>
  </nav>
</template>

激活状态样式

&lt;router-link&gt;组件在激活状态下会添加router-link-active和router-link-exact-active类名，可以通过这些类名来添加激活状态样式：

/* 部分匹配激活状态 */
.router-link-active {
  color: red;
  font-weight: bold;
}

/* 精确匹配激活状态 */
.router-link-exact-active {
  color: blue;
  border-bottom: 2px solid blue;
}

也可以通过active-class和exact-active-class属性自定义激活状态类名：

<router-link 
  to="/" 
  active-class="active" 
  exact-active-class="exact-active"
>
  Home
</router-link>

在组件中使用路由

在组件中可以通过$router和$route访问路由实例和当前路由信息：

<!-- 在选项式API中使用 -->
<template>
  <div>
    <p>当前路径: {{ $route.path }}</p>
    <p>当前参数: {{ $route.params }}</p>
    <p>当前查询: {{ $route.query }}</p>
    <button @click="goToAbout">跳转到About页</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      // 使用$router进行编程式导航
      this.$router.push('/about')
    }
  }
}
</script>

在组合式API中，可以使用useRouter和useRoute函数访问路由实例和当前路由信息：

<!-- 在组合式API中使用 -->
<template>
  <div>
    <p>当前路径: {{ route.path }}</p>
    <p>当前参数: {{ route.params }}</p>
    <p>当前查询: {{ route.query }}</p>
    <button @click="goToAbout">跳转到About页</button>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'

// 获取路由实例
const router = useRouter()
// 获取当前路由信息
const route = useRoute()

const goToAbout = () => {
  // 编程式导航
  router.push('/about')
}
</script>

路由懒加载

Vue Router支持路由懒加载，即只在需要时才加载路由组件，从而提高应用的初始加载速度：

// 使用动态导入实现路由懒加载
const Home = () => import('../views/Home.vue')
const About = () => import('../views/About.vue')

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

也可以为懒加载的组件添加命名chunk，用于代码分割：

// 添加命名chunk
const Home = () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
const About = () => import(/* webpackChunkName: "about" */ '../views/About.vue')

路由元信息

可以为路由添加元信息，用于存储路由的额外数据，如标题、权限等：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: '首页',
      requiresAuth: false
    }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      title: '关于我们',
      requiresAuth: false
    }
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: {
      title: '仪表盘',
      requiresAuth: true
    }
  }
]

可以通过路由守卫访问和使用路由元信息：

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 设置页面标题
  document.title = to.meta.title || '默认标题'
  
  // 检查权限
  if (to.meta.requiresAuth && !isAuthenticated) {
    // 未登录，跳转到登录页
    next('/login')
  } else {
    // 已登录或不需要权限，继续导航
    next()
  }
})

总结

Vue Router 4.x是Vue 3的官方路由库，用于实现单页面应用的路由功能。通过学习Vue Router的安装与配置，以及路由视图和导航链接的使用，你可以开始构建具有路由功能的单页面应用。

在本节中，我们学习了：

  1. Vue Router 4.x的安装与配置：包括如何安装Vue Router，如何配置路由规则，以及如何在Vue应用中使用路由
  2. 路由视图与导航链接：学习了&lt;router-view&gt;和&lt;router-link&gt;组件的使用，以及如何在组件中访问路由实例和当前路由信息
  3. 路由懒加载：了解了如何使用路由懒加载提高应用的初始加载速度
  4. 路由元信息：学习了如何为路由添加元信息，并在路由守卫中使用

在下一节中，我们将学习Vue Router的进阶配置，包括动态路由、嵌套路由、命名路由和命名视图等高级功能。

« 上一篇 组合式函数(Composables) 下一篇 » 路由配置进阶
↑