vue2路由跳转

// Vue 2 路由跳转示例代码

// 引入 Vue 和 Vue Router
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 }
];

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

// 创建 Vue 实例
new Vue({
  router,
  el: '#app',
  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>
  `
});

// 在组件或方法中进行编程式导航
// this.$router.push({ path: '/about' });

解释说明：

1. 引入 Vue 和 Vue Router：首先需要引入 Vue 和 Vue Router，并使用 Vue.use(VueRouter) 来安装 Vue Router 插件。
2. 定义路由组件：创建两个简单的组件 Home 和 About，它们分别对应不同的页面内容。
3. 创建路由配置：定义路由规则，将路径与对应的组件关联起来。
4. 创建路由实例：通过 new VueRouter 创建一个路由实例，并传入路由配置。
5. 创建 Vue 实例：在 Vue 实例中使用 router 选项来启用路由功能，并在模板中使用 <router-link> 和 <router-view> 标签来实现页面导航和视图展示。
6. 编程式导航：可以在组件的方法中使用 this.$router.push() 来实现编程式的路由跳转。