Vue 路由实现组件切换

不会就问 qq3131015733
觉得讲得不好了，麻烦喷一下，感谢反馈。
下拉菜单乃个项目的地址：https://1024code.com/ide/rzaqrgx

前置知识

会用vue写hello world

入门

效果展示

要实现的功能

点首页跳首页

点关于跳关于

安装依赖

npm install vue-router@latest

文件目录

（解释每个文件的作用）

- src- App.vue- main.js- router.js- components- Home.vue- About.vue

代码Home.vue

<script setup></script><template><div>这是主页</div>
</template><style scoped></style>

代码About.vue

<script setup></script><template><div>这是关于页</div>
</template><style scoped></style>

代码router.js

import { createRouter,createWebHistory } from "vue-router";
import Home from './components/Home.vue'
import About from "./components/About.vue";
const routes=[{path:'/',component:Home},{path:'/home',redirect:'/'},{path:'/about',component:About}]
const router = createRouter({history:createWebHistory(),routes
})export default router

代码App.vue

<script setup>
import Home from './components/Home.vue'
import About from './components/Home.vue'
</script><template><div><router-link to="/">Home</router-link>|<router-link to="/about">About</router-link><router-view></router-view></div>
</template><style scoped>
</style>

代码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')

进阶

使用下拉菜单实现每日笔记清晰记录

效果展示

下拉菜单 学习

学会怎么用下拉菜单了，再往下学怎么关联router

<template><div id="app"><h1>Select an option:</h1><select v-model="selectedOption" @change="handleChange"><option v-for="option in options" :key="option" :value="option">{{ option }}</option></select><p>Selected option is {{selectedOption}}</p><!--可以在此处添加一个根据 selectedOption 去 路由到不同组件的功能--></div></template><script setup>import { ref } from 'vue';const selectedOption = ref('Option 1');const options = ref(['Option 1', 'Option 2', 'Option 3']);const handleChange = () => {console.log('Selected option:', selectedOption.value);};</script><style scoped>#app {font-family: Arial, sans-serif;text-align: center;margin-top: 50px;}select {margin-top: 20px;padding: 5px;font-size: 1em;}</style>

下拉菜单和router

<template><div id="app"><h1>Select an option:</h1><select v-model="selectedOption" @change="handleChange($event)"><option v-for="option in options" :key="option" :value="option">{{ option }}</option></select><router-view></router-view></div></template><script setup>import { ref } from 'vue';import { useRouter } from 'vue-router';const router = useRouter();const selectedOption = ref('/home');const options = ref(['/','/home', '/about']);const handleChange = (event) => {router.push(event.target.value);};</script><style scoped>#app {font-family: Arial, sans-serif;text-align: center;margin-top: 50px;}select {margin-top: 20px;padding: 5px;font-size: 1em;}</style>