vite ---添加 router 配置

在src--router下编写路由配置index.js

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from './../components/Home.vue'
import Welcome from './../components/Welcome.vue'
import Login from './../components/Login.vue'
​
const routes = [
    {
        name: 'home'
        , path: '/'
        , meta:{
            title:'首页'
        }
        , component: Home
        ,redirect:'/welcome'
        , children: [
            {
                name: 'welcome'
                , path: '/welcome'
                , meta:{
                    title:'欢迎页'
                }
                , component:Welcome 
            },
            {
                name: 'login'
                , path: '/login'
                , meta:{
                    title:'登录页'
                }
                , component:Login 
            }
        ]
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
// 导出路由
export default router

在src--components--Home.vue

<script >
  export default{
    name:'Home'
  }
</script>
​
<template>
  <div>
    <h1>home,欢迎来到Vue3全栈课程</h1>
    <router-view></router-view>
  </div>
</template>
​
<style>
​
</style>

​

在components-- Login.vue

<template>

    <h1>欢迎来到登录页面</h1>
    <el-button @click="goHome">回首页</el-button>
</template>

<script setup >
  // export default{
  //   name:'Login'
  // }
  import {useRouter} from 'vue-router'
  const router = useRouter();
  const goHome = ()=>{
    router.push('/welcome')
  }
</script>



<style>

</style>

​

在components-- Welcome.vue

<script >
  export default{
    name:'Welcome'
  }
</script>
​
<template>
    <h1>welcome,欢迎来到Vue3全栈课程</h1>
    <!-- <el-button type="primary">去登录页</el-button> -->
    <router-link to="/login">去登录</router-link>
</template>
​
<style>
​
</style>

​

再main.js 里面加载 路由配置文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
console.log("环境变量=>",import.meta.env)
const app = createApp(App);
app.use(router).mount('#app')

在App.vue 中 调用 路由

<script >
  export default{
    name:'app'
  }
​
</script>
​
<template>
  <router-view></router-view>  //路由调用在·
</template>
​
<style>
​
</style>