vue2 router

// Vue 2 Router 示例代码

// 首先，确保你已经安装了 vue-router
// npm install vue-router@3

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

// 安装 vue-router 插件
Vue.use(VueRouter);

// 定义组件
const Home = { template: '<div>Home</div>' };
const About = { template: '<div>About</div>' };

// 创建路由规则
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

// 创建路由器实例
const router = new VueRouter({
  mode: 'history', // 使用 HTML5 History 模式
  routes       // 简写为 `routes: routes`
});

// 创建并挂载根实例
new Vue({
  router,
  template: `
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <!-- 使用 router-link 组件进行导航 -->
        <router-link to="/">Go to Home</router-link>
        <router-link to="/about">Go to About</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>
  `
}).$mount('#app');

解释说明：

1. 安装和引入：

   • 确保你已经安装了 vue-router，可以通过 npm install vue-router@3 来安装。
   • 引入 VueRouter 并通过 Vue.use(VueRouter) 安装插件。

2. 定义组件：

   • 定义了两个简单的组件 Home 和 About，它们分别对应不同的页面内容。

3. 创建路由规则：

   • 定义了一个 routes 数组，每个元素是一个对象，包含路径 (path) 和对应的组件 (component)。

4. 创建路由器实例：

   • 使用 VueRouter 构造函数创建一个路由器实例，并传入配置选项。这里使用了 mode: 'history' 来启用 HTML5 History 模式，使得 URL 不再带有 # 符号。

5. 创建并挂载根实例：

   • 创建一个新的 Vue 实例，并将其挂载到 DOM 中的 #app 元素上。
   • 使用 <router-link> 组件来创建导航链接，用户点击这些链接时会触发路由切换。
   • 使用 <router-view> 组件作为占位符，路由匹配到的组件将在此处渲染。

这样就完成了一个简单的 Vue 2 + Vue Router 的应用示例。