【转】[Vue] route 路由的使用

来自：kimi.ai

在 Vue.js 中，路由（route）通常用于实现单页面应用（SPA）的页面切换和导航功能。Vue 的路由功能是通过 vue-router 库实现的。以下是一个简单的 vue-router 定义示例，展示如何配置路由规则以及如何在 Vue 应用中使用路由。

示例代码

1. 安装 vue-router

如果你还没有安装 vue-router，可以通过 npm 或 yarn 安装：

bash复制

npm install vue-router
# 或者
yarn add vue-router

2. 创建路由配置文件

通常会创建一个专门的文件（如 router/index.js）来管理路由配置。

JavaScript复制

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import Contact from '../views/Contact.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  },
  {
    path: '/user/:id', // 动态路由
    name: 'UserProfile',
    component: () => import('../views/UserProfile.vue')
  },
  {
    path: '/:pathMatch(.*)*', // 404 页面
    name: 'NotFound',
    component: () => import('../views/NotFound.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

3. 创建视图组件

在 views 文件夹中创建对应的组件文件。例如：

vue复制

<!-- views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

vue复制

<!-- views/About.vue -->
<template>
  <div>
    <h1>About Page</h1>
    <p>Learn more about us.</p>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

vue复制

<!-- views/Contact.vue -->
<template>
  <div>
    <h1>Contact Page</h1>
    <p>Contact us at contact@example.com</p>
  </div>
</template>

<script>
export default {
  name: 'Contact'
};
</script>

4. 在主文件中引入路由

在 main.js 或 main.ts 文件中引入路由配置，并将其挂载到 Vue 应用中。

JavaScript复制

// 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');

5. 在根组件中使用 <router-view> 和 <router-link>

在 App.vue 文件中，使用 <router-view> 来显示当前路由对应的组件，并使用 <router-link> 来创建导航链接。

vue复制

<!-- App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/contact">Contact</router-link>
    </nav>

    <router-view />
  </div>
</template>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

示例说明

1. 路由配置：
   • path：定义路由的路径。
   • name：为路由定义一个名称，方便在代码中引用。
   • component：指定该路由对应的组件。
   • 动态路由（如 /user/:id）可以通过 this.$route.params.id 获取动态参数。
   • 404 页面（/:pathMatch(.*)*）用于捕获所有未匹配的路径。
2. 导航链接：
   • 使用 <router-link> 来创建导航链接，to 属性指定目标路由的路径。
   • <router-link> 会被渲染为 <a> 标签，点击后会触发路由切换，而不会刷新页面。
3. 路由视图：
   • <router-view> 是一个占位符，用于显示当前路由对应的组件内容。
4. 动态路由和嵌套路由：
   • 动态路由（如 /user/:id）可以通过 this.$route.params 获取动态参数。
   • 嵌套路由可以通过在路由配置中嵌套 children 属性来实现。

通过以上步骤，你可以在 Vue 应用中实现一个基本的路由功能，用于管理页面切换和导航。