vue2路由

// Vue 2 路由示例代码

// 1. 安装 vue-router
// npm install vue-router

// 2. 创建路由配置文件 router.js 或在 main.js 中直接配置

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

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

// 定义路由
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

// 创建路由实例并传递 `routes` 配置
const router = new VueRouter({
  mode: 'history', // 使用 HTML5 History 模式
  routes // (缩写) 相当于 routes: routes
});

// 3. 在 main.js 中引入并使用路由
import App from './App.vue';

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

// 4. 在 App.vue 中使用 <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>

<script>
export default {
  name: 'App'
};
</script>

解释说明：

1. 安装 vue-router：首先需要通过 npm 安装 vue-router。
2. 创建路由配置：定义路由规则，将不同的路径映射到对应的组件。
3. 创建路由实例：使用 VueRouter 创建路由实例，并传入路由配置。
4. 在主应用中使用路由：在 main.js 中引入路由实例，并将其挂载到 Vue 实例上。
5. 使用 <router-view>：在模板中使用 <router-view> 来动态渲染匹配的组件。同时，可以使用 <router-link> 来创建导航链接。

以上代码展示了如何在 Vue 2 项目中配置和使用路由。