Vue router组件的使用

在 Vue Router 中，你可以使用组件来定义不同的路由页面。每个路由对应一个组件，当用户访问特定的路由时，对应的组件就会被加载和渲染。

下面是一个基本的示例，展示如何在 Vue Router 中使用组件：

1. 首先，在你的项目中创建一个组件。可以在 `components` 文件夹下创建一个新的组件文件，例如 `Home.vue`。

<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

<script>
export default {
  // 组件的逻辑代码
}
</script>

2. 在 `router.js` 文件中，引入你的组件，并在路由规则中使用它。

import Home from './components/Home.vue';

const routes = [
  {
    path: '/',
    component: Home
  }
];

// 其他路由规则...

const router = new VueRouter({
  routes,
  mode: 'history'
});

export default router;

在上面的代码中，我们将 `Home` 组件作为根路径 `'/'` 的路由规则中的组件。

3. 最后，在你的根组件中使用 `<router-view>` 标签来显示不同页面对应的组件。

<template>
  <div>
    <h1>My App</h1>

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

<script>
export default {
  // 组件的逻辑代码
}
</script>

`<router-view>` 标签会根据当前路由的路径，动态地渲染对应的组件。

这就是如何在 Vue Router 中使用组件来定义不同的路由页面。你可以创建多个组件，并在路由规则中使用它们，以构建更复杂的应用程序。希望对你有所帮助！如有任何疑问，请随时提问。