Vue Router4.0

Vue Router是Vue.js的官方路由管理器，用于实现页面之间的跳转和导航。Vue Router 4.0是最新版本，具有许多新功能和改进。以下是一些基本的Vue Router 4.0概念和用法：

1. 安装Vue Router

在Vue.js应用程序中安装Vue Router，可以通过npm或yarn进行安装。

npm install vue-router@4.0.0

1. 创建路由

在Vue.js应用程序中创建路由，需要定义路由的路径和对应的组件。

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 }
  ]
})

export default router

1. 注册路由

在Vue.js应用程序中使用路由，需要将路由实例注册到根组件中。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

1. 使用路由

在Vue.js应用程序中使用路由，可以使用<router-link>组件进行导航，或者使用$router对象进行编程式导航。

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

export default {
  methods: {
    goToAbout() {
      this.$router.push('/about')
    }
  }
}