如何实现Vue路由的二级菜单

news2024/11/24 10:49:25

目录

Vue路由（一、二级路由）

一级路由配置

二级路由配置

Vue中展示二级路由的默认模块/二级路由默认显示

Vue路由，二级路由及跳转

如何用vue实现二级菜单栏

◼️ 相关参考资料

当朋友们看到这个文章时想必是想要了解vue路由二级菜单相关的知识，这里同时多从个角度为大家介绍vue二级路由的配置相应的内容。

Vue路由（一、二级路由）

是前台为了实现单页面应用然后设置路径，根据不同的路径显示不同页面。但是这些路径在服务器上不是真是存在的。

hash路由：默认的是hash路由，过onhashchange()来检测路由的变化,根据不同的hash来显示不同元素。获取当前的hash值location.hash

history路由：通过onpopstate来检测history堆栈路径的变化，堆栈的路径是通过history.pushState(null, '',"?page=2")添加进去的

由hash路由设置成history路由，给路由添加配置项 mode="history"。

一级路由配置

1、设置相应组件

2、在router-index.js文件中添加路由配置

首先，引入组件，然后配置路由规则 {path:设置路径，name:名，component:组件}

3、在需要当前组件的地方给页面添加<router-view></router-view>

4、设置导航路径

使用vue提供<router-link to="路径"></router-link> ，默认的解析成a标签

5、设置默认路由

6、设置导航链接的样式

二级路由配置

1、需要定义组件

2、确定好在哪个组件配置二级路由，就去哪个组件的配置规则中添加children关键字，按照一级路由的配置方法配置规则

3、在需要配置二级路由的组件中添加<router-view></router-view>

4、设置导航路径

使用vue提供<router-link to="路径"></router-link> ，默认的解析成a标签

5、设置导航链接的样式

我们可以定义一个一级路由，里面可以包裹底部footer组件，让他为二级路由，这时点击底部的二级路由时，就会切换不同的页面，而不需要底部组件显示的时候，那我们再配置一个一级路由就好了！！！

Vue中展示二级路由的默认模块/二级路由默认显示

1. 新建一个二级路由 导入到router/index.js 并配置

2. 在盛放子路由的页面加入router-link 与 router-view标签

3. 点击带有router-link标签的按钮即可展示子路由

Vue路由，二级路由及跳转

* router/index.js文件：

/* 导入Vue构造函数 */
import Vue from "vue";
/* 导入路由VueRouter构造函数 */
import VueRouter from "vue-router";
/* 导入HomeView页面 */
import HomeView from "../views/HomeView.vue";

// 调用构造函数Vue的use方法，传入VueRouter构造函数
// 作用是把VueRouter作为一个插件全局插入到Vue中
Vue.use(VueRouter);

/* 定义一个路由数组对象 */
const routes = [
  /**
   *一个对象就对应了一个路由
   *path 就是路由的地址
   *name 给路由起的名字
   *component 具体跳转的是哪个组件页面
   */
  {
    /* path: '/' 根页面，表示已进入就显示的页面 */
    path: "/",
    name: "home",
    /* 这种方式一进入页面就会全部加载，不是用到的时候再加载，性能没有懒加载的方式好 */
    component: HomeView,
    /* 可以使用redirect重定向，一进入主页就展示第一个子页面，redirect 后面跟的是路径名，并不是name */
    /* 因为/是根路径，所以可以直接写one */
    redirect: "oneview",
    children: [
      {
        path: "oneview",
        name: "oneview",
        component: () => import("../views/OneView.vue"),
      },
    ],
  },
  {
    /* 这里是一级目录所以可以加斜杠/，表示根目录 */
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    /* 懒加载功能：一开始不加载，当你切换路由的时候再加载 */
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),

    /* about不是根路径，所以redirect后面要写全'/about/aboutchild' */
    redirect: "/about/aboutchild",
    children: [
      {
        path: "aboutchild",
        name: "aboutchild",
        component: () => import("../views/AboutChild.vue"),
      },
    ],
  },
  {
    path: "/ChildA",
    name: "ChildA",
    component: () => import("../components/ChildA.vue"),
  },
  {
    path: "/ChildB",
    name: "ChildB",
    component: () => import("../components/ChildB.vue"),
  },
  {
    /* path:'*' 必须要放最后 */
    /* path:'*' 表示上面的路由没有匹配到，则进入下面的页面 */
    path: "*",
    name: "notfound",
    component: () => import("../components/NotFound.vue"),
  },
];

/* 实例化构造函数 VueRouter 产生一个实例化对象，并把上面的路由数组对象routes当作参数 以对象的方式传给构造函数 VueRouter */
const router = new VueRouter({
  routes,
});

/* 把实例化路由对象 router默认导出  */
export default router;

* main.js文件：

/* 导入Vue构造函数 */
import Vue from "vue";
/* 导入App.vue入口页面 */
import App from "./App.vue";
/* 导入router文件夹中的index.js中的router实例化对象 */
/* 因为一个文件夹里面只有一个index.js文件，所以在脚手架中可以把./router/index.js简写为./router  */
import router from "./router";

/* 生产提示 */
/* 改成false是用来关闭开发者提示 */
Vue.config.productionTip = false;
/* 在Vue的对象参数里面配置 el:"#app" 等于.$mount('#app')，都是用来挂载到id为#app的div上的 */
/* 把路由实例化对象router配置在Vue中，作用是保证项目中所有的vue文件都可以使用router路由的属性和方法 */
new Vue({
  router /* 会把所有vue文件渲染到App组件上 */,
  render: (h = h(App)),
}).$mount("#app"); /* 等同于el:"#app" */

* views/App.vue文件：

<template>
  <div id="app">
    <nav>
      <!-- router-link组件是负责路由跳转的，to属性是用来写跳转路径的。router-link组件本质上是用a标签来实现的，路由跳转的原理是根据锚点来的 -->
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/ChildA">点我跳转ChildA</router-link>
      <router-link to="/ChildB">点我跳转ChildB</router-link>
    </nav>
    <!-- router-view 组件是用来展示组件的容器 -->
    <!-- 创建两个组件ChildA和ChildB，并写两个router-link组件标签可以实现跳转，跳转组件显示在router-view容器中 -->
    <router-view></router-view>
  </div>
</template>
<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

/* .router-link-exact-active 跳转链接被激活的时候加载到router-link身上 */
nav a.router-link-exact-active {
  color: #42b983;
}
</style>

AboutView.vue文件：

<template>
  <div class="aboutview">
    <h1>This is an AboutView page</h1>
    <!-- to后面写的是路径 -->
    <!-- <router-link to="/about/aboutchild">我是aboutchild</router-link>-->
    <!-- to 后面要加冒号: 作用是把后面解析成一个对象而不是字符串 -->
    <router-link :to="{ name: 'aboutchild' }">我是aboutchild</router-link>
    <!-- 二级路由显示的容器  -->
    <router-view></router-view>
  </div>
</template>
<script>
export default{
  name:"aboutview",
  components: {
    AboutChild",
  },
  
};
</script>

<style scoped>
</style>

* AboutChild.vue文件：

<template>
  <div class=aboutChild>
    <h1>AboutChild</h1>
  </div>
</template>
<script>
export default {
}
</script>
<style scoped></style>

* HomeView.vue文件：

<template>
  <div class="homeview">
    <h1>go!go!go!</h1>
    <router-link to="/oneview">我是OneView</router-link>
    <!-- 二级路由对应的组件容器   -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  components: {OneView},
};
</script>

* OneView.vue文件：

<template>
  <div class="oneview">
    <h1>我是OneView</h1>
  </div>
</template>
<script>
export default {

}
</script>
<style scoped></style>

* components/ChildA.vue文件：

<template>
  <div class="childA">
    <h1>我是childA</h1>
  </div>
</template>
<script>export default {

}
</script>

<style scoped></style>

* ChildB.vue文件：

<template>
  <div class="childB">
    <h1>我是childB</h1>
  </div>
</template>
<script>
export default {

}
</script>

<style scoped></style>

* NotFound.vue文件:

<template>
  <div class="notfound">
    <h1>我是NotFound</h1>
  </div>
</template>
<script>
export default {

}
</script>

<style scoped></style>

左边文件目录：

如何用vue实现二级菜单栏

二级菜单导航是一种很普遍的功能，一般网页都会有这个功能。如果是平常的做法就是改变url，跳到相应的页面；还有一种就是frame。

如果用vue的话，可以用vue-router改变router-view里面的组件，这样就能做到不刷新页面都能跳到相应“页面”。其实url地址还是变了，但是他没有刷新页面其他位置的内容，只是改变了router-view里面的组件，渲染了新的组件。

◼️ 相关参考资料

Vue中实现路由跳转传参的4种方式

简单了解一下vue-router是什么

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/871211.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode150道面试经典题-- 有效的字母异位词(简单)

LeetCode150道面试经典题-- 有效的字母异位词(简单)

1.题目 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同&#xff0c;则称 s 和 t 互为字母异位词。 2.示例 s"adasd" t"daads" 返回true s"addad" t &q…
阅读更多...
森海塞尔集团专注专业音频业务的首个财年圆满收官

森海塞尔集团专注专业音频业务的首个财年圆满收官

2022年&#xff0c;这家家族企业通过其专业音频解决方案实现4.677亿欧元销售额 韦德马克&#xff0c;2023年6月27日——2022财年&#xff0c;森海塞尔集团进一步扩展其作为专业音频解决方案提供商的强大地位&#xff0c;并依靠自身取得可持续增长。专业音频解决方案的销售额增…
阅读更多...
在Ubuntu20.04以Docker方式安装Mysql详细教程（支持外部连接，数据映射到物理磁盘，备份数据，导出数据，恢复数据）...

在Ubuntu20.04以Docker方式安装Mysql详细教程（支持外部连接，数据映射到物理磁盘，备份数据，导出数据，恢复数据）...

最近&#xff0c;从阿里云迁移到天翼云&#xff0c;为了保证WordPress查库速度&#xff0c;数据库也要一并迁移&#xff0c;但数据库是很贵的&#xff0c;为了降低个人WordPress网站的成本&#xff0c;我决定自己建数据库。本文是使用Docker镜像建立数据库的方法&#xff0c;数…
阅读更多...
SAP MM学习笔记19- SAP中的库存类型，以及 保留在库的利用场景

SAP MM学习笔记19- SAP中的库存类型，以及 保留在库的利用场景

SAP中有3种库存类型。 1&#xff0c;利用可能在库&#xff08;非限制使用库存&#xff09; 2&#xff0c;品质检查中在库&#xff08;质检库存&#xff09; 3&#xff0c;保留在库&#xff08;已冻结库存&#xff09; 这3种库存类型在库存移动的时候&#xff0c;是可以互相转…
阅读更多...
4. 软件开发的环境搭建

4. 软件开发的环境搭建

目录 1. 搭建环境 1.1 检查 JDK 1.2 检查 MySQL 数据库 1.3 检查 Maven 1.4 检查 GITEEGIT 1.5 安装插件 1.5.1 安装 Spring Boot Helper 1.5.2 安装 lombok 1.6 创建仓库 1.6.1 登录 GITEE 创建仓库并复制仓库地址 1.6.2 克隆到本地 1.7 创建工程 1.7.1 设置编码…
阅读更多...
Unity 框架学习--1

Unity 框架学习--1

由浅入深&#xff0c;慢慢演化实现框架 两个类的实现代码完全一样&#xff0c;就只有类名或类型不一样的时候&#xff0c;而且还需要不断扩展&#xff08;未来会增加各种事件&#xff09;的时候&#xff0c;这时候就用 泛型 继承 来提取&#xff0c;继承解决扩展的问题&#…
阅读更多...
【Quarkus技术系列】打造基于Quarkus的云原生微服务框架实践（1）

【Quarkus技术系列】打造基于Quarkus的云原生微服务框架实践（1）

前提介绍 本系列文章主要讲解如何基于Quarkus技术搭建和开发"专为Kubernetes而优化的Java微服务框架"的入门和实践&#xff0c;你将会学习到如何搭建Quarkus微服务脚环境及脚手架&#xff0c;开发Quarkus的端点服务&#xff0c;系统和应用层级的配置介绍与Quarkus的…
阅读更多...
JavaWeb_总体介绍

JavaWeb_总体介绍

文章目录 1.总括2.JavaWeb项目架构 1.总括 2.JavaWeb项目架构
阅读更多...
【Linux】DNS协议——应用层

【Linux】DNS协议——应用层

DNS协议 DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;协议&#xff0c;是一个用来将域名转化为IP地址的应用层协议。 DNS背景 TCP/IP中通过IP地址和端口号的方式&#xff0c;来确定网络中一个主机上的一个程序。但IP地址是一长串数字&#xff0c;并不…
阅读更多...
阿里云账号注册流程_多种注册方法_图文详解

阿里云账号注册流程_多种注册方法_图文详解

阿里云账号怎么注册&#xff1f;阿里云账号支持手机号注册、阿里云APP注册、支付宝和钉钉多种注册方式&#xff0c;账号注册后需要通过实名认证才可以购买或使用云产品&#xff0c;阿里云百科来详细说下不同途径注册阿里云账号图文流程&#xff1a; 目录 阿里云账号注册流程 …
阅读更多...
利用python实现网络设备配置批量上传和批量下载功能

利用python实现网络设备配置批量上传和批量下载功能

利用python实现网络设备配置批量上传和批量下载功能 利用ensp实现网络设备和物理主机互通配置网络设备配置批量上传功能配置批量下载功能常见问题 提示&#xff1a; 本文章代码所使用目录均使用相对目录&#xff0c;只需将配置存放目录和文件下载目录&#xff08;已用符号标出…
阅读更多...
Java：正则表达式书写规则及相关案例：检验QQ号码，校验手机号码，邮箱格式，当前时间

Java：正则表达式书写规则及相关案例：检验QQ号码，校验手机号码，邮箱格式，当前时间

正则表达式 目标:体验一下使用正则表达式来校验数据格式的合法性。需求:校验QQ号码是否正确&#xff0c;要求全部是数字&#xff0c;长度是(6-20&#xff09;之间&#xff0c;不能以0开头 首先用自己编写的程序判断QQ号码是否正确 public static void main(String[] args) {Sy…
阅读更多...
走近ChatGPT与类似产品：原理解析与比较

走近ChatGPT与类似产品：原理解析与比较

目录 1. 引言1.1 技术的进步与自然语言处理1.2 ChatGPT的崭新概念 2. ChatGPT: 一览众山小2.1 GPT-3.5架构简介2.2 ChatGPT的学习与训练2.3 文本生成的工作原理 3. 市场上类似产品调研3.1 对话式人工智能产品分类3.2 文心一言3.3 讯飞星火 4. 应用前景与局限性展望4.1 ChatGPT的…
阅读更多...
STM32 F103C8T6学习笔记6：IIC通信__驱动MPU6050 6轴运动处理组件—一阶互补滤波

STM32 F103C8T6学习笔记6：IIC通信__驱动MPU6050 6轴运动处理组件—一阶互补滤波

今日主要学习一款倾角传感器——MPU6050,往后对单片机原理基础讲的会比较少&#xff0c;更倾向于简单粗暴地贴代码&#xff0c;因为经过前些日子对MSP432的学习&#xff0c;对原理方面也有些熟络了&#xff0c;除了在新接触它时会对其引脚、时钟、总线等进行仔细一些的研究之外…
阅读更多...
790. 多米诺和托米诺平铺

790. 多米诺和托米诺平铺

题目描述&#xff1a; 主要思路&#xff1a; class Solution { public:int numTilings(int n) {long long f[n][4],mod1e97;f[0][0]1;f[0][1]f[0][2]0;f[0][3]1;for(int i1;i<n;i){f[i][0]f[i-1][3];f[i][1] (f[i-1][0]f[i-1][2])%mod;f[i][2] (f[i-1][0]f[i-1][1])%mod;f…
阅读更多...
嵌入式技术，就在你的手边！

嵌入式技术，就在你的手边！

嵌入式技术&#xff0c;听起来多么高大上的名词&#xff0c;同时它也确实是当今信息技术的前沿领域&#xff0c;但这并不意味着它就距离我们很遥远。 事实恰恰相反&#xff0c;在当今科技发展迅猛的时代&#xff0c;嵌入式技术成为了人们生活中不可或缺的一部分。它以其小巧、高…
阅读更多...
手撕Java集合——链表

手撕Java集合——链表

链表 一、链表概念特性二、不带头单向非循环链表实现&#x1f351;1、定义结点&#x1f351;2、打印链表&#x1f351;3、使用递归逆序打印链表&#x1f351;4、头插&#x1f351;5、尾插&#x1f351;6、指定位置插入&#x1f351;7、查找是否包含关键字key是否在单链表当中&a…
阅读更多...
C#，数值计算——Dynpro的计算方法与源程序

C#，数值计算——Dynpro的计算方法与源程序

给定向量nstate&#xff0c;其整数值是每个状态中的状态数阶段&#xff08;第一和最后阶段为1&#xff09;&#xff0c;并给定函数成本&#xff08;j&#xff0c;k&#xff0c;i&#xff09;返回在阶段i的状态j和的状态k之间移动的成本阶段i1&#xff0c;此例程返回与nstate长度…
阅读更多...
(杭电多校)2023“钉耙编程”中国大学生算法设计超级联赛（8）

(杭电多校)2023“钉耙编程”中国大学生算法设计超级联赛（8）

1005 0 vs 1 双端队列暴力模拟,时间复杂度为O(n*T) 首先预处理0的右边第一个0的下标,1的右边第一个1的下标,0的左边第一个0的下标,1的左边第一个1的下标 然后进行模拟 如果当前是zero的轮次,那么就看双端队列的两端 如果两头都是1,那么one赢,如果1头是0,1头是1,那么只能选择0 如…
阅读更多...
概率图模型（Probabilistic Graphical Model，PGM）

概率图模型（Probabilistic Graphical Model，PGM）

概率图模型&#xff08;Probabilistic Graphical Model&#xff0c;PGM&#xff09;&#xff0c;是一种用图结构来描述多元随机变量之间条件独立性的概率模型。它可以用来表示复杂的概率分布&#xff0c;进行有效的推理和学习&#xff0c;以及解决各种实际问题&#xff0c;如图…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023