[vue3后台管理二]首页和登录测试

1 修改main.js

import './assets/main.css'

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

2 路由创建

import {createRouter, createWebHistory} from 'vue-router'
const routes = [
        {
    path:'/',
    redirect:'/login',

    },
    {
    path:'/login',
    name:'login',
        component:()=>import('../views/login/index.vue'),

    },
        {
    path:'/home',
    name:'home',
        component:()=>import('../views/home/index.vue'),

    },
]

const router = createRouter({
    history:createWebHistory(),
    routes:routes
    })

export default router

图片

3 登录

<script setup>
import {reactive} from "vue";
const obj = reactive({name:'登录'})
</script>

<template>
<h1>{{obj.name}}</h1>
</template>

<style scoped>

</style>

图片

4 首页

<script setup>
import {reactive} from "vue";
const obj = reactive({name:'首页'})
</script>

<template>
<h1>{{obj.name}}</h1>
</template>

<style scoped>

</style>

图片

5 修改App,vue

<script setup>

</script>

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

</template>

<style scoped>

</style>

图片

启动测试