如何在VUE2上实现路由（router）

1. 安装 Vue Router

如果你的项目尚未安装 Vue Router，可以通过 npm 或 yarn 来安装它：

npm install vue-router@3 --save

这里安装的是 Vue Router 3，因为这是专门为 Vue 2 设计的版本。

2. 设置路由配置

在你的 Vue 项目中，创建一个路由配置文件。通常，这个文件被命名为 router.js 或 router/index.js。

import Vue from 'vue';
import Router from 'vue-router';
import HomePage from './components/HomePage.vue';
import AboutPage from './components/AboutPage.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',  // 使用 HTML5 History 模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomePage
    },
    {
      path: '/about',
      name: 'about',
      component: AboutPage
    }
  ]
});

3. 在 Vue 实例中使用路由

在你的入口文件（通常是 main.js 或 app.js）中，导入路由配置并在创建 Vue 实例时使用它。

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

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

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

在你的 Vue 组件中，使用 <router-view> 作为路由的占位符，这将显示当前路由对应的组件。使用 <router-link> 来创建导航链接。

<template>
  <div id="app">
    <h1>Welcome to My Vue App</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

这些步骤应该可以帮助你在 Vue 2 项目中成功引入和使用 Vue Router。