vue3 使用vue-router

1.首先安装vue-router

npm install vue-router@next

查看package.json是否安装成功

2.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')

3.新建router文件夹 index.js 创建路由并输出对象

import { createRouter, createWebHistory } from "vue-router";

const routes = [{
    path: '/home',
    name: 'home',
    component: () =>
        import ('@/views/home.vue')
}, ]

// 创建路由
const router = createRouter({
    // history模式：createWebHistory
    history: createWebHistory("/"),
    routes,
});

// 输出对象
export default router;

4.app.vue页面

<template>
  <router-view></router-view>
</template>

5.页面跳转

import { useRoute, useRouter } from 'vue-router' 相当于vue2中的 $route 和 $router

<template>
  <button @click="gohome"></button>
</template>
<script>
import { useRouter } from 'vue-router'
export default {
  setup () {
    const router = useRouter()
    const gohome = (() => {
      router.push("./home")
    })
    return {
      gohome
    }
  },
}
</script>