Vite 构建项目 & 路由配置

//1 安装vue-router
npm install vue-router@next
//end

//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')
//end

//3 新建router文件夹 index.js 创建路由并输出对象
import {
    createRouter,
    createWebHashHistory
} from 'vue-router'


const routes = [
    {
        path: '/',
        name: 'login',
        component: () => import('../views/HomeLogin.vue')
    },
    {
        path: '/HomeView',
        name: 'home',
      children: [ // （子路由 需要在父页面 放置 <router-view /> 标签）
            { path: '/HomeView', component: () => import('./../views/AboutView.vue') },
            { path: '/HomeView', component: () => import('./../views/AaaaView.vue') },
        ]
    },
    
]
// 创建路由
const router = createRouter({ 
    history: createWebHashHistory(), //process.env.BASE_URL已废弃 //createWebHistory
    routes
})
// 输出对象
export default router
//end

//4 vue页面
<template>
  <router-view/><!-- router-view 必须存在的路由 -->
</template>
//end

//5.页面跳转
//import { useRoute, useRouter } from 'vue-router' 
//相当于vue2中的 $route 发出 和 $router 接收

<template>
  <button @click="gohome"></button>
</template>

<script setup>
    import { useRouter } from 'vue-router'
    const $router = useRouter()//路由口
    
    function goHome(){//跳转
        $router.push('/HomeView');
    }
</script>