Vue CLI项目中的路由是如何配置的？

在 Vue CLI 项目中，路由的配置通常使用 Vue Router 来实现。 以下是在 Vue CLI 项目中配置路由的一般步骤：

1：安装 Vue Router：首先要在项目安装好 Vue Router。可以使用 npm 或 yarn 在项目根目录中运行以下命令进行安装：

代码语言：javascript复制

npm install vue-router

或

代码语言：javascript复制

yarn add vue-router

2：创建路由文件：在 src 目录下的 router 文件夹中创建一个名为 index.js 的文件。这是路由配置文件。

3：导入依赖：在 index.js 文件中，导入 Vue 和 Vue Router：

代码语言：javascript复制

import Vue from 'vue';
import VueRouter from 'vue-router';

4：使用 Vue Router 插件：在 index.js 文件中，使用 Vue Router 插件：

代码语言：javascript复制

Vue.use(VueRouter);

5：定义路由：在 index.js 文件中，定义路由配置，包括路由路径和对应的组件。可以创建多个路由，并为每个路由指定相应的组件。

代码语言：javascript复制

const routes = [
  {
    path: '/',
    component: Home, // 指定 Home 组件作为根路径的组件
  },
  {
    path: '/about',
    component: About, // 指定 About 组件作为 /about 路径的组件
  },
  // ...
];

6：创建路由实例：在 index.js 文件中，使用定义的路由配置创建一个 VueRouter 实例。

代码语言：javascript复制

const router = new VueRouter({
  routes,
  // 可选：指定路由的模式，可以是 "hash" 或 "history"
  mode: 'history',
});

7：将路由挂载到 Vue 实例：在项目的入口文件（通常是 main.js）中，将创建的路由实例挂载到 Vue 实例上。

代码语言：javascript复制

new Vue({
  router, // 将路由实例注入到 Vue 实例中
  render: (h) => h(App),
}).$mount('#app');

8：在组件中使用路由：现在，可以在 Vue 组件中使用路由了。例如，在导航栏组件中设置链接：

代码语言：javascript复制

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

在页面组件中渲染路由视图：

代码语言：javascript复制

<router-view></router-view>

ok，完成了在 Vue CLI 项目中配置和使用 Vue Router。可以根据需要扩展和配置更多的路由规则，并在组件之间实现导航和页面切换。

cli router 插件 路由 配置

0 人点赞