Vue 中如何使用 Vue Router？

推荐答案

在 Vue 中使用 Vue Router 的步骤如下：

1. 安装 Vue Router： 如果你使用的是 Vue CLI 创建的项目，可以通过以下命令安装 Vue Router：

   npm install vue-router

2. 创建路由实例： 在项目中创建一个 router 目录，并在其中创建一个 index.js 文件，用于配置路由：

   // www.javascriptcn.com code example
   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import Home from '../views/Home.vue';
   import About from '../views/About.vue';
   
   Vue.use(VueRouter);
   
   const routes = [
     {
       path: '/',
       name: 'Home',
       component: Home
     },
     {
       path: '/about',
       name: 'About',
       component: About
     }
   ];
   
   const router = new VueRouter({
     mode: 'history',
     routes
   });
   
   export default router;

3. 在 Vue 实例中使用路由： 在 main.js 中引入并使用路由：

   import Vue from 'vue';
   import App from './App.vue';
   import router from './router';
   
   new Vue({
     router,
     render: h => h(App)
   }).$mount('#app');

4. 在组件中使用路由： 在组件中使用 <router-link> 进行导航，使用 <router-view> 显示路由对应的组件：

   <template>
     <div id="app">
       <router-link to="/">Home</router-link>
       <router-link to="/about">About</router-link>
       <router-view></router-view>
     </div>
   </template>

本题详细解读

1. 安装 Vue Router

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。通过 npm install vue-router 命令可以将其安装到项目中。

2. 创建路由实例

在 router/index.js 文件中，我们首先导入 Vue 和 VueRouter，然后通过 Vue.use(VueRouter) 将 Vue Router 注册为 Vue 的插件。接着，我们定义了一个 routes 数组，其中每个对象代表一个路由，包含 path、name 和 component 等属性。最后，我们创建了一个 VueRouter 实例，并将其导出。

3. 在 Vue 实例中使用路由

在 main.js 中，我们将路由实例传递给 Vue 实例的 router 选项，这样 Vue 实例就可以使用 Vue Router 提供的功能。

4. 在组件中使用路由

在组件模板中，我们使用 <router-link> 组件来创建导航链接，to 属性指定了目标路由的路径。<router-view> 组件则用于显示当前路由对应的组件内容。

通过以上步骤，我们可以在 Vue 项目中成功使用 Vue Router 来实现页面导航和路由管理。