vue3router导航

在Vue3中，我们可以使用Vue Router来实现导航。以下是一个简单的例子：

1. 首先，我们需要安装Vue Router：

npm install vue-router@4.0.0-0

2. 在main.js中引入Vue Router并创建路由实例：

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

3. 在App.vue中添加路由出口：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

4. 现在我们可以在组件中使用`<router-link>`标签来实现导航：

<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

5. 我们还可以使用导航守卫来监听路由变化：

import { onBeforeRouteUpdate } from 'vue-router'

export default {
  setup() {
    onBeforeRouteUpdate((to, from, next) => {
      // 在路由更新前执行的代码
      console.log('Route is changing')
      next()
    })
  }
}