解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题


Posted in Javascript onNovember 28, 2017

在vue的实际开发中往往会遇到公用一个组件的问题,比如有一个菜单中的两个按钮,点击每个按钮调用的是同一个组件,其内容是根据路由的参数的不同来请求不同的内容。

第一步,首先新建一个vue+webpack+vuecli的demo,如下操作:

全局安装vue-cli,vue-cil是vue的脚手架工具,安装命令:

npm install -g vue-cli

第二步,进入到工程目录中,创建一个vuedemo的文件夹工程,如下两步操作:

cd vue_test_project //进入vue_test_project目录下
vue init webpack vuedemo //在vue_test_project目录下创建一个vuedemo工程

输入这个命令之后,会出现一些提示,是什么不用管,一直按回车即可。

第三步,如下操作:

cd vuedemo
npm install

执行npm install需要一点时间,因为会从服务器上下载代码啦之类的。并且在执行过程中会有一些警告信息。不用管,等着就是了。如果长时间没有响应,就ctrl+c停止掉,然后再执行一次即可。

最后一步,操作如下:

npm run dev

在运行了npm run dev之后,会自动打开一个浏览器窗口,就可以看到实际的效果了。这个demo就创建好了。现在就在这个demo中添加一些内容,修改成如下:

解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题

修改HelloWorld.vue的内容为如下:

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <h2>Essential Links</h2>
 <div class="btn">
  <router-link :to="{name:'content',params:{differId:'con1'}}">内容按钮1</router-link>
  <router-link :to="{name:'content',params:{differId:'con2'}}">内容按钮2</router-link>
 </div>
 <router-view></router-view>
 </div>
</template>
<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
 msg: 'Welcome to Your Vue.js App'
 }
 }
}
</script>
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

路由router下的index.html的修改为如下:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import content from '@/components/conDetail'
Vue.use(Router)
export default new Router({
 routes: [
 {
 path: '/',
 name: 'HelloWorld',
 component: HelloWorld,
 children:[
  {name:'content',path:'content/:differId',component:content}
 ]
 }
 ]
})

现在创建一个conDetail.vue了,如下:

<template>
 <div class="same">
 这个是相同的内容
 <div class="conlist">
  <template v-for="item in items">
  <p>{{item.con}}</p>
  </template>
 </div>
 </div>
</template>
<script>
export default {
 name: 'conDetail',
 data () {
 return {
 msg: '',
 differIdType:'',
 conlist:[
  {'con':'这是第一个内容按钮的内容1'},
  {'con':'这是第一个内容按钮的内容2'}
 ],
 items:[], 
 }
 },
 mounted(){
  this.differIdType = this.$route.params.differId == 'con1' ? '0' : '1';
  if(this.differIdType == 0){
  this.items = this.conlist;
  }else{
  this.items = [];
  }
 },
 watch:{
 $route:function(to,from){
  this.differIdType = to.params.differId == 'con1' ? '0' : '1'; 
  if(this.differIdType == 0){
  this.items = this.conlist;
  }else{
  this.items = [];
  } 
 }
 }
}
</script>
<style>
</style>

结果就是,当点击内容按钮1,出现了对象的内容,点击内容按钮2,出现相应的内容。当然我这儿写的是点击按钮2的时候,其items的内容为空数组。这儿也使用了$route的监听。

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象:

const User = {
 template: '...',
 watch: {
 '$route' (to, from) {
  // 对路由变化作出响应...
 }
 }
}

或者使用 2.2 中引入的 beforeRouteUpdate 守卫:

const User = {
 template: '...',
 beforeRouteUpdate (to, from, next) {
 // react to route changes...
 // don't forget to call next()
 }
}

总结

以上所述是小编给大家介绍的解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 计算两个整数的百分比值
Dec 26 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
Jan 17 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
JS+css3实现幻灯片轮播图
Aug 14 Javascript
vue-music关于Player播放器组件详解
Nov 28 #Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 #Javascript
JS实现的找零张数最小问题示例
Nov 28 #Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 #Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
Nov 28 #Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 #Javascript
AngularJs 禁止模板缓存的方法
Nov 28 #Javascript
You might like
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
php csv操作类代码
2009/12/14 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
js原生实现FastClick事件的实例
2016/11/20 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
python多进程实现进程间通信实例
2017/11/24 Python
Python解决八皇后问题示例
2018/04/22 Python
Python检测网络延迟的代码
2018/05/15 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
个人简历中的自我评价怎么写
2014/01/26 职场文书
安全大检查反思材料
2014/01/31 职场文书
校企合作协议书
2014/04/16 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
法人授权委托书样本
2014/09/19 职场文书
2014年标准化工作总结
2014/12/17 职场文书
个人年终总结怎么写
2015/03/09 职场文书
小学推普周活动总结
2015/05/07 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS