Vue 项目路由配置教程_vue项目路由配置-优快云博客

本文链接：https://blog.youkuaiyun.com/hlj20051208/article/details/144700461

在现代的前端开发中，路由是前端应用的重要组成部分，它帮助我们管理不同的页面和组件。Vue.js 作为一个流行的前端框架，也提供了非常方便的路由管理方式，通过 **Vue Router** 来实现页面的切换和路由的控制。

本文将介绍如何在 Vue 项目中配置 Vue Router，从基本的路由配置到更高级的功能，帮助你快速上手并灵活使用 Vue 的路由功能。

1. 安装 Vue Router

如果你是新建的 Vue 项目，可以通过 Vue CLI 来自动安装和配置 Vue Router。如果是手动安装，可以通过以下命令来安装：

npm install vue-router

或者如果你使用的是 Yarn：

yarn add vue-router

2. 配置路由

2.1 创建路由配置文件

在 Vue 项目中，通常我们会将路由配置放在一个专门的文件中，通常是 `src/router/index.js`。如果你是 Vue CLI 脚手架创建的项目，默认会创建该文件。

在该文件中，我们需要导入 Vue 和 Vue Router，并进行一些基础配置。

// src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

// 导入页面组件
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

Vue.use(Router)

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

const router = new Router({
  routes
})

export default router

2.2 解释路由配置

- `path`: 路由的路径，当用户访问该路径时，会渲染对应的组件。
- `name`: 路由的名字（可选），用于命名路由，便于在其他地方进行跳转。
- `component`: 路由对应的组件。

在上述配置中，我们定义了两个路由：
- `/` 路径对应 `Home` 组件
- `/about` 路径对应 `About` 组件

3. 在 `main.js` 中使用路由

在 `src/main.js` 中，我们需要将路由配置引入并告诉 Vue 使用这个路由。

// src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,  // 引入路由
  render: h => h(App)
}).$mount('#app')

这里通过 `new Vue({ router })` 向 Vue 实例中添加了路由功能。接下来，我们可以在应用中使用路由。

4. 路由视图的使用

在 Vue 中，路由视图通常使用 `<router-view>` 组件来展示当前匹配的组件。在 `App.vue` 中，我们需要添加一个 `<router-view />` 标签，作为路由的挂载点。

<!-- src/App.vue -->
<template>
  <div id="app">
    <router-view></router-view>  <!-- 路由视图 -->
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

当用户访问不同的路由时，`<router-view>` 会根据路由配置渲染不同的组件。

5. 路由链接与跳转

5.1 使用 `<router-link>` 进行路由导航

Vue Router 提供了 `<router-link>` 组件，允许我们在模板中进行路由跳转。

<!-- src/components/Navigation.vue -->
<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

通过 `to` 属性设置要跳转的路径。`<router-link>` 会渲染成一个 `<a>` 标签，因此它有着和常规 HTML 链接相同的行为。

5.2 编程式导航

除了通过 `<router-link>` 标签进行跳转外，我们还可以通过编程的方式进行跳转。使用 Vue Router 提供的 `$router` 对象进行路由跳转：

// src/components/SomeComponent.vue
<template>
  <button @click="goToAbout">Go to About</button>
</template>

<script>
export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
}
</script>

在这个例子中，点击按钮后会调用 `this.$router.push('/about')` 来跳转到 `/about` 路由。

6. 动态路由与路由参数

6.1 路由参数

在 Vue Router 中，我们可以通过路径参数传递数据。例如，我们希望用户访问 `/user/1` 时能够渲染 `User` 组件，并显示 ID 为 1 的用户信息。

// src/router/index.js
import User from '@/views/User.vue'

const routes = [
  {
    path: '/user/:id',  // :id 是动态参数
    name: 'User',
    component: User
  }
]

6.2 访问路由参数

在组件中，我们可以通过 `$route.params` 访问路由参数：

// src/views/User.vue
<template>
  <div>
    <h1>User ID: {{ userId }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id  // 获取动态路由参数
    }
  }
}
</script>

7. 路由守卫

Vue Router 提供了多种路由守卫来控制路由访问，如 全局守卫、路由独享守卫、组件内守卫。。

7.1 全局守卫

全局守卫可以用于每次路由跳转时进行判断。可以在 `router/index.js` 中定义：

// src/router/index.js

router.beforeEach((to, from, next) => {
  if (to.name === 'About' && !isAuthenticated()) {
    next('/')  // 如果未认证，则跳转到首页
  } else {
    next()  // 继续路由导航
  }
})

7.2 路由独享守卫

路由独享守卫用于在特定路由中使用守卫：

// src/router/index.js

{
  path: '/about',
  name: 'About',
  component: About,
  beforeEnter: (to, from, next) => {
    if (!isAuthenticated()) {
      next('/')
    } else {
      next()
    }
  }
}

8. 嵌套路由

Vue Router 还支持嵌套路由（子路由）。我们可以在父路由中配置子路由，创建更加复杂的路由结构。

// src/router/index.js
import Parent from '@/views/Parent.vue'
import Child from '@/views/Child.vue'

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child
      }
    ]
  }
]

在 `Parent.vue` 中，我们需要添加 `<router-view></router-view>` 来显示子路由的组件。

9. 嵌套路由详细讲解

嵌套路由是 Vue Router 强大的功能之一，它可以让你在父路由中定义子路由，从而实现复杂的布局和页面结构。

9.1 嵌套路由结构

首先，我们来看一个嵌套路由的配置示例：

// src/router/index.js
import Parent from '@/views/Parent.vue'
import Child1 from '@/views/Child1.vue'
import Child2 from '@/views/Child2.vue'

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child1',  // 子路由路径相对于父路由
        component: Child1
      },
      {
        path: 'child2',
        component: Child2
      }
    ]
  }
]

9.2 父组件的 `<router-view>`

在父组件 Parent.vue 中，我们需要使用 <router-view> 来渲染子路由的内容：

<!-- src/views/Parent.vue -->
<template>
  <div>
    <h2>Parent Component</h2>
    <router-view></router-view>  <!-- 子路由将渲染到这里 -->
  </div>
</template>

这样，当用户访问 /parent/child1 时，Child1 组件会渲染在父组件的 <router-view> 位置。当访问 /parent/child2 时，Child2 组件会渲染到同一个位置。

9.3 命名视图

有时候，一个父路由下可能有多个子路由需要渲染到不同的区域，这时可以使用命名视图。通过在父路由中定义多个 <router-view>，并给它们命名，可以实现不同视图的渲染。

javascript
// src/router/index.js
const routes = [
  {
    path: '/dashboard',
    components: {
      default: Dashboard,    // 默认视图
      sidebar: Sidebar       // 侧边栏视图
    }
  }
]

在父组件中，可以这样配置命名的 <router-view>：

html
<!-- src/views/Dashboard.vue -->
<template>
  <div>
    <h2>Dashboard</h2>
    <router-view></router-view>  <!-- 默认视图 -->
    <router-view name="sidebar"></router-view>  <!-- 侧边栏视图 -->
  </div>
</template>

这样，当访问 /dashboard 路径时，Dashboard 组件会渲染在默认视图位置，而 Sidebar 组件会渲染在命名为 sidebar 的 <router-view> 位置。