【vue 3.0 中使用vue-router详细步骤】

Vue 3.0 中使用 vue-router 的步骤如下：

1. 安装 vue-router：

npminstall [email protected]

2. 创建一个单独的文件：

import{ createRouter, createWebHashHistory }from'vue-router'import Home from'./views/Home.vue'const routes =[{path:'/',name:'Home',component: Home
  }]const router =createRouter({history:createWebHashHistory(),
  routes
})exportdefault router

3.main.js 配置路由：

import{ createApp }from'vue'import App from'./App.vue'import router from'./router'const app =createApp(App)
app.use(router)
app.mount('#app')

4. 在 App.vue 中使用

<router-view>

组件：

<template><div><h1>App.vue</h1><router-view /></div></template>

5. 在路由的组件中使用

<router-link>

组件进行导航：

<template><div><h2>About.vue</h2><router-link to="/">Go to Home</router-link></div></template>

6.使用push进行跳转

<template><div><button @click="godetalis">跳转</button></div></template><script>import{ useRouter }from"vue-router";//引入路由exportdefault{setup(){const $route =useRouter();functiongodetalis(){
      $route.push({name:"你的路由名称"});}return{
      godetalis
    };}};</script>

以上就是在 Vue 3.0 中使用 vue-router 的详细步骤。