vue2 路由

// Vue 2 路由示例代码

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

// 引入 Vue 和 Vue Router
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({
  routes // (缩写) 相当于 routes: routes
});

// 创建和挂载根实例
new Vue({
  router,
  template: `
    <div id="app">
      <h1>Vue 2 路由示例</h1>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-view></router-view>
    </div>
  `
}).$mount('#app');

解释说明：

1. 引入 Vue 和 Vue Router：首先需要引入 Vue 和 Vue Router，并使用 Vue.use(VueRouter) 来安装 Vue Router 插件。
2. 定义组件：这里我们定义了两个简单的组件 Home 和 About，每个组件都有一个模板。
3. 创建路由配置：通过 routes 数组来配置路径和对应的组件。
4. 创建路由器实例：使用 new VueRouter({ routes }) 创建路由器实例。
5. 创建和挂载根实例：在根实例中，通过 router 属性将路由器实例注入到 Vue 实例中，并使用 <router-link> 和 <router-view> 来实现页面导航和内容展示。