vue router跳转

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

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

// 创建路由器实例
const router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes, // 短语法，等同于 `routes: routes`
})

// 创建应用实例并挂载到页面上
const app = Vue.createApp({})
app.use(router)
app.mount('#app')

// 在模板中使用 <router-link> 组件进行导航
// <router-link> 默认会渲染成一个 `<a>` 标签，并且自动给它添加正确的 `href` 属性
<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

// 或者使用编程式导航
// 在方法中使用 $router.push 方法来进行路由跳转
methods: {
  goToAbout() {
    this.$router.push({ path: '/about' })
  }
}

解释说明：

1. 定义路由组件：创建了两个简单的组件 Home 和 About。
2. 定义路由：通过 routes 数组定义了两个路由规则，分别对应 / 和 /about 路径。
3. 创建路由器实例：使用 VueRouter.createRouter 创建路由器实例，并传入历史模式和路由配置。
4. 创建应用实例并挂载：创建 Vue 应用实例，并使用 .use(router) 将路由器挂载到应用上。
5. 模板中的导航：使用 <router-link> 组件来生成导航链接，点击后会自动切换对应的路由组件。
6. 编程式导航：在方法中使用 $router.push 进行编程式的路由跳转。