vue3路由的基本使用 vueRouter

vueRouter

1.安装vueRouter

pnpm install vue-router@4

2.创建路由文件

3.创建路由

index.ts

import {createRouter,createWebHistory} from 'vue-router'


const router = createRouter({
    //路由方式
    history:createWebHistory(import.meta.env.BASE_URL),
    //路由列表
    routes:[
        {
            path:'/login',
            component:()=>import("@/views/loginPage.vue") 
        },
        {
            path:'/',
            component:() => import('@/views/LayoutPage.vue') ,
            children:[
                {
                    path:'/control/1',
                    component:()=> import('@/views/feature/controlPage.vue')
                },
                {
                    path:'/control/manage',
                    component:()=> import('@/views/feature/ManagePage.vue')
                },
            ]
        }
    ]
})
export default router

文件结构

layoutPage.vue

<template>
    <div class="main-box">
        <header>控制台</header>
    <footer>
        <div class="left">
            <routerLink to="/control/1">控制台1</routerLink>
            <routerLink to="/control/manage">管理</routerLink>
        </div>
        <div class="right">
            <router-view></router-view>
        </div>
    </footer>
    </div>

</template>
<script setup>

</script>
<style lang="scss">
header{
    border-bottom: 1px solid rgba($color: #000000, $alpha: 1.0);
}
footer{
    display: flex;
    height: 100%;
    .left{
        height: 100%;
        padding: 0 20px;
        border-right: 1px solid rgba($color: #000000, $alpha: 1.0);
    }
    .right{
        flex-grow: 1;
        background-color: red;
    }
}
.main-box{
    height: 100vh;
}
</style>

ManagePage.vue

<template>
    管理
</template>
<script setup>

</script>
<style lang="scss">

</style>

4.挂载路由

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'  //这是挂载pinia不用管
import router from './router'  //这是刚刚定义的路由
createApp(App).use(pinia).use(router).mount('#app')

5.测试

可以通过点击控制台1 管理使红色区域显示不同的页面