首页 > 其他分享 >vue3 如何使用router路由表 创建 Menu 导航菜单

vue3 如何使用router路由表 创建 Menu 导航菜单

时间:2024-11-05 16:02:07浏览次数:1  
标签:菜单 Menu vue vue3 router import 导航 路由 路由表

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

相关文章

  • Vue3 iOS微信JSSDK授权签名错误及图片选择兼容
    iOS微信JSSDK授权签名错误及图片选择兼容一、项目概述二、iOS签名错误invalidsignature三、iOS选择图片转载请注明出处:https://blog.csdn.net/hx7013/article/details/143502680一、项目概述Vue3+Vite+Vue-Router4+JS-SDK1.6由于之前开发调试都是在......
  • vite+vue3.x+uni搭建项目
    vite-uniapp-template......
  • SpringBoot3+Vue3+ElementPlus通用权限后台系统 | 小蚂蚁云
     项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ElementPlus、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈......
  • SpringBoot3+Vue3+ElementPlus搭建后台系统脚手架 | 小蚂蚁云
     项目介绍基于SpringBoot3、SpringSecurity、MybatisPlus、Vue3、TypeScript、Vite、ElementPlus、MySQL等技术栈实现的单体前后端分离后台管理系统;后端基于Java语言采用SpringBoot3、SpringSecurity、MybatisPlus、MySQL等主流技术栈,前端基于Vue3、TypeScript、Vite等技术栈......
  • 【Vue3】Vue3相比Vue2有哪些新特性?全面解析与应用指南
    ......
  • three.js+vue3三维地图下钻地图,实现下钻全国-》省份-》城市-》区县
    案例效果截图:具体场景和功能,详见b站视频:https://www.bilibili.com/video/BV1Kb421q7c4/?vd_source=7d4ec9c9275b9c7d16afe9b4625f636c 案例逻辑代码:<template><divid="chinaMap"><divid="threejs"ref="threejs"></div>......
  • three.js+vue3三维地图下钻地图(下钻:全国-省份-城市-区县)
    案例视频效果:3D地图可视化three.js三维地图前端vue3下钻地图GIS地图大屏源码案例代码如下:<template><divid="chinaMap"><divid="threejs"ref="threejs"></div><!--右侧按钮--><divclass="rightButton"......
  • vue3 深度监听用法 watch watchEffect 详解
    在Vue3中,你可以使用watch和watchEffect进行深度监听。深度监听意味着你能够监控一个对象及其嵌套属性的变化。使用watch进行深度监听如果你想监听一个响应式对象的所有嵌套属性,可以使用deep:true选项。以下是一个示例:<template><div><inputv-model=......
  • vue3 vue-i18n和pinia使用
    安装vue-i18n和Pinia(状态管理库)npminstallvue-i18n@10npminstallpinia 在main.js中引入i18n和piniaimport'./assets/main.css'import{createApp}from'vue'importAppfrom'./App.vue'importi18nfrom"./i18n";//引入pini......
  • vue3项目中使用iconify
    事情是这样的,我比较喜欢使用MaterialDesignIcons的图标(MaterialDesignIcons-IconLibrary-Pictogrammers)。最初我把整个MaterialDesignIcons的css文件下载下来,然后在vue3项目中使用。但是这个css文件的体积比较大,但是我用的也就是那几个icon图标。有没有办法实现图......