如何用vue做一个二级联动

最新推荐文章于 2024-05-16 16:38:03 发布
最新推荐文章于 2024-05-16 16:38:03 发布
阅读量6.6k 收藏 6
点赞数
CC 4.0 BY-SA版权
分类专栏： 小贴士
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_40300591/article/details/88772394
本文介绍了如何利用Vue和vue-router构建一个二级联动导航。通过在main.vue中使用Tabs组件和嵌套的router-view，配合router.js的配置，实现一级导航（活动、通知、设置）与二级导航（如活动中的帖子、回复等）的联动效果。每个一级目录下，通过children配置二级路由，并在对应的组件中展示内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
如何做一个像这样二级联动的目录？
先来说说重点和思路：重点在于router-view的使用以及vue-router的配置，思路是两层children的嵌套。
下面开始实现功能。
翻开我们的vue工程的，写好我们相应的组件，包括：
一级：活动activity、通知message、设置setting；
二级：活动中的：帖子minePost、回复mineReply等；
   通知中的：回应mReply等；
   设置只有一个，默认为setting
现在来看看我们的文件列表。
在这里插入图片描述
要实现这样的功能，我们要用好router-view。
我的一级导航用的是Tabs。
main.vue:
在这里插入图片描述
把router-view嵌套在TabPane中，注意这里的三个router-view是同一个，用来显示一级导航栏下方的内容，包括二级导航栏和内容。
接着是二级导航，用的是Menu，举个例子。
activity.vue:

最低0.47元/天 解锁文章

200万优质内容无限畅学
基于Vue开发基础的应用——二级联动菜单演示
qingchayujiu的博客
10-21 2666
基于Vue开发基础的应用——二级联动菜单演示 实验目的 制作一个二级菜单，通过二级联动菜单选择类别，当第一个菜单选项改变时，第二个菜单中的选项也会随之改变 实现效果 实现代码 head部分： 通过src引入vue.js文件 <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js"></script> </head> b
vue3+Element Plus实现省市区层联选择器
最新发布
Swallow的博客
07-07 632
本文介绍了使用element-china-area-data实现省市区联动的完整方案。首先展示了二级和三级联动的效果图，然后详细说明安装步骤（npm安装依赖）和四种数据格式的差异（带/不带"全部"选项）。重点提供了省市区三级联动的实现代码模板，使用Vue3的setup语法糖，包含el-cascader组件的基本配置和change事件处理。该方案简洁高效，开发者只需安装依赖并复制模板代码即可快速实现地区选择功能，最后以一句励志英文作结。
js (vue)实现二级联动
m0_37343874的博客
05-19 1708
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> </head> <body> 省/市: <select id="provice"></select> 市/区: <select id="city"></..
Vue实现二级联动
weixin_43828846的博客
05-21 581
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 引入样式 --
vue二级联动
weixin_58495461的博客
08-29 484
<template> <div class="linkage"> <div class="linkage-button" ref="linkage-button"> <div class="linkage-button-list" ref="linkage-button-list"> <div :class=" index == ButtonListIndex
vue实现下拉二级联动_vue实现二级联动效果
weixin_35316354的博客
12-31 867
你如城市与省份间的二级联动效果demo.pag-set-bg{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;}所在区域{{item.country}}{{item}}new Vue({el:'#app',data:{list:[{text: '这是第1条数据'}],UniversityList:[],schoolList:[],c...
vue select二级联动第二级默认选中第一个option值的实例
08-28
Vue Select 二级联动第二级默认选中第一个 Option 值的实例详解 在本篇文章中，我们将详细介绍 Vue Select 二级联动第二级默认选中第一个 Option 值的实例。该实例具有很好的参考价值，希望对大家有所帮助。 知识...
VUE2 前端实现 静态二级省市联动选择select的示例
08-28
在Vue2中，实现静态二级省市联动选择是一个常见的需求，主要应用于用户填写地址或选择服务区域等场景。这里我们使用Element UI库中的`<el-select>`组件来完成这个功能。Element UI是基于Vue2的一个流行的UI组件库，...
Vue配合iView实现省市二级联动的示例代码
10-18
首先，二级联动的基本思路是：当用户在一级列表（省份）中选择一个选项时，二级列表（城市）会根据所选省份自动更新。这里，我们用iView的Select组件来创建这两个下拉列表，并通过v-model双向绑定来同步用户的选择。...
城市联动数据
NiHao___的博客
08-22 1151
/* * 城市 地区 */ const datas = [ { city: '北京市', area: [ '东城区', '西城区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区', .
黑豹程序员-vue实现两级联动下拉列表
长安紫薯的专栏
01-23 1178
在开发中这类需求很多，前后两个下拉框有紧密关系，第一个下拉框相当于一个分类，选中第一个下拉框中的某个分类后，第二个下拉框的内容随之改变，列出其分类下的选项。
vue脚手架中实现二级联动
wpb1109的博客
09-16 175
html代码 <template> <div class="linkage"> <div class="linkage-button" ref="linkage-button"> <div class="linkage-button-list" ref="linkage-button-list"> <div :class=" index == ButtonListIn
vue 实现二级联动
weixin_33843409的博客
09-10 2719
因项目需要，最近用vue写了个二级联动，刚开始用vue不熟悉，收集了两种方法，这也是我借鉴别人的文章和思路才写出来的，其实没什么区别，可以参考下：第一种：这是第一种方法的html部分代码： <div id="test"> <select v-model="selected"> <option v-...
【vue】实现单选框二级联动
m0_46459413的博客
09-05 1523
el-selec中的clearable属性，则可将选择器清空。需要注意的是，clearable属性仅适用于单选。所以需要使用@clear事件进行联动清除；当清除薪资中的内容时，用工形式的内容不会被清除；当清除用工形式中的内容时，薪资中的内容也会被随着清除；选择用工形式后，薪资才出现内容。薪资的内容随着用工形式的选择发生变化。
js实现简单的二级联动（使用Vue实现）
bokestudy的博客
03-30 3079
点开Vue官网，看了看Vue的介绍，感觉这框架不错！其实，自己就是小白，对于这个框架可以说只闻其声不见其形，更别说熟悉或者掌握了。朋友说面试的时候让他写一个二级联动，我想到Vue的双向数据绑定，于是，就有了以下代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;    &lt;meta charset="UTF-8"&gt;    &lt;title&g...
vue实现下拉框二级联动效果
热门推荐
冲出仁川，走出马德里，故事还会再继续
11-01 1万+
vue实现下拉菜单二级联动效果1、实现效果2、后端返回的数据格式3、vue页面中 1、实现效果 2、后端返回的数据格式 "list": [ { "id": "1178214681118568449", "title": "后端开发", "children": [ { "id": "1178214681139539969", "title": "Java" },
vue3 ts 二级联动
2302_80657296的博客
05-16 336
Vue3+TS,二级联动
Vue3 +Ts 实现美团二级联动效果
m0_64387562的博客
07-20 623
Vue3 +Ts 实现美团二级联动效果
js实现二级联动（包括js、vue、react+ts、vue3+ts的写法）
朱远辉的博客
05-08 1590
js实现二级联动（包括js、vue、react+ts、vue3+ts的写法）
使用vue实现一个省市二级联动特效
11-29
在Vue.js中实现省市二级联动的特效通常会利用到组件化开发和事件绑定。以下是一个简单的步骤示例： 1. 首先，创建两个自定义选择器组件，分别对应省级和市级。例如，`CityDropdown.vue`和`ProvinceDropdown.vue`。 ```html <template> <select v-model="selectedValue" @change="onChange"> <option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option> </select> </template> <script> export default { props: ['options', 'initialValue'], data() { return { selectedValue: this.initialValue }; }, methods: { onChange(value) { // 这里可以根据value更新下拉框选项 } } }; </script> ``` 2. 然后，在父组件中引入这两个组件，并通过props传递数据和事件处理函数。例如，`App.vue`: ```html <template> <div> <province-dropdown v-model="provinceOptions" @provinceChange="loadCities"></province-dropdown> <city-dropdown v-model="cityOptions" :options="cityOptions" /> </div> </template> <script> import ProvinceDropdown from './components/ProvinceDropdown.vue'; import CityDropdown from './components/CityDropdown.vue'; export default { components: { ProvinceDropdown, CityDropdown }, data() { return { provinceOptions: [], cityOptions: [] }; }, methods: { loadCities(province) { // 根据province值从服务器获取城市列表并更新cityOptions } }, created() { this.loadProvinces(); }, mounted() { this.loadProvinces(); }, async loadProvinces() { const provinces = await fetch('your-api-url-to-get-provinces'); this.provinceOptions = provinces; } }; </script> ``` 在这个例子中，当用户在省选区改变时，`loadCities`方法会被触发，从服务器获取对应省份的城市列表，然后更新`cityOptions`。城市选区则只显示当前省份下的城市选项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值