vue 路由

// Vue 路由示例代码

// 首先安装 vue-router 包
// npm install vue-router

// 引入 Vue 和 VueRouter
import Vue from 'vue';
import VueRouter from 'vue-router';

// 使用 VueRouter 插件
Vue.use(VueRouter);

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

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

// 创建 VueRouter 实例
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
});

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

解释说明：

1. 安装和引入：首先需要通过 npm install vue-router 安装 vue-router，然后在项目中引入 VueRouter。
2. 定义组件：创建了两个简单的组件 Home 和 About，它们分别对应不同的页面内容。
3. 配置路由：通过 routes 数组定义了两个路由规则，分别指向 / 和 /about 路径，并关联对应的组件。
4. 创建路由器实例：使用 VueRouter 创建一个路由器实例，并将路由规则传递给它。
5. 挂载根实例：最后创建一个 Vue 根实例，并将其挂载到页面上的 #app 元素。通过 <router-link> 和 <router-view> 实现页面的导航和内容展示。

这样，你就可以在浏览器中通过不同的 URL 访问不同的页面内容了。