vue3 如何使用router路由表 创建 Menu 导航菜单
-
1. vue3 如何使用router路由表 创建 Menu 导航菜单
-
1.1. 安装 Vue Router
-
1.2. 设置路由
-
1.3. 在主应用中使用路由
-
1.4. 创建导航菜单组件
-
1.5. 在布局中使用导航菜单
1. vue3 如何使用router路由表 创建 Menu 导航菜单
在 Vue 3 中集成路由(router)和导航菜单(Menu)是一个常见的需求,尤其是在开发具有多个页面或视图的应用程序时。
下面是一些基本步骤来展示如何设置 Vue Router 并与导航菜单组件集成。
1.1. 安装 Vue Router
首先确保你已经安装了 Vue Router。
如果还没有安装,可以通过 npm 或 yarn 进行安装:
npm install vue-router@4 // 或者使用 yarn yarn add vue-router@4
1.2. 设置路由
创建路由配置文件,通常命名为 router.js
或 router/index.js
,并定义你的路由:
import { createRouter, createWebHistory } from 'vue-router'; import Home from '../views/Home.vue'; import About from '../views/About.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, { path: '/about', name: 'About', component: About, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router;
1.3. 在主应用中使用路由
确保在你的主应用文件中导入并使用路由:
import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; // 引入你的路由配置 const app = createApp(App); app.use(router); // 使用路由 app.mount('#app');
1.4. 创建导航菜单组件
接下来,你可以创建一个包含链接的导航菜单组件。
这里有一个简单的例子:
<template> <nav class="navbar"> <ul> <li v-for="item in items" :key="item.name"> <router-link :to="item.path">{{ item.title }}</router-link> </li> </ul> </nav> </template> <script> export default { data() { return { items: [ { title: '首页', path: '/' }, { title: '关于', path: '/about' }, ], }; }, }; </script> <style scoped> .navbar ul { list-style-type: none; padding: 0; } .navbar a { text-decoration: none; } </style>
1.5. 在布局中使用导航菜单
将上述创建的导航菜单组件引入到你的全局布局或者需要的地方:
<template> <div id="app"> <NavigationMenu /> <!-- 使用导航菜单 --> <router-view></router-view> <!-- 显示路由对应的视图 --> </div> </template> <script> import NavigationMenu from './components/NavigationMenu.vue'; export default { components: { NavigationMenu, }, }; </script>
这样就完成了基本的 Vue Router 和导航菜单的设置。当然,根据实际项目的需求,你可能还需要添加更多的功能,比如嵌套路由、动态路由等。
同时,也可以通过 CSS 对导航菜单进行美化,使其更加符合你的设计要求。
标签:菜单,Menu,vue,vue3,router,import,导航,路由,路由表 From: https://www.cnblogs.com/ranyihang/p/18528182