vue-router跳转页面的方法
使用Vue.js做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的href,于是vue-router应运而生
官方文档请点击这里
##vue-router
第一步当然是安装了,用npm安装命令
npminstallvue-router--save-dev
第二步在.vue组件里添加标签,格式如下
<divid="app"> <p> <!--使用router-link组件来导航.--> <!--通过传入`to`属性指定在main.js文件设置的别名链接,如/1--> <!--<router-link>默认会被渲染成一个`<a>`标签--> <router-linkto="/1">GotoFoo</router-link> </p> <!--路由出口--> <!--点击<router-link>的时候指定的页面将渲染在这里--> <router-view></router-view> </div>
第三步在main.js文件里配置路由,格式如下
importVueRouterfrom'vue-router' //1.定义(路由)组件。 //加载组件 importPage01from'./max' Vue.use(VueRouter) //全局安装路由功能 //2.定义路由 //每个路由应该映射一个组件。 constroutes=[ {path:'/1',component:Page01} //前面to指定的地方path/1 ] //3.创建router实例,然后传`routes`配置 constrouter=newVueRouter({ routes }) //4.创建和挂载根实例。 //记得要通过router配置参数注入路由, //从而让整个应用都有路由功能 newVue({ el:'#app', template:'<App/>', components:{App}, router }) //现在,就可以重启试试了!
注意routes和router是不一样的单词,别眼花了
路由就是这么的简单!
props
父组件向子组件传值
在子组件里添加prors,格式如下
props:[ 'rimag', 'hyaline', 'levels', 'ohyaline' ],
然后是在父组件里向子组件里传值,格式如下
//HTML <nv-nav:rimag=mgse:hyaline=ortiy:levels=vels:ohyaline=orctiy></nv-nav> //传值用绑定 //JS data(){ return{ mgse:-20.62, orctiy:0, vels:-1, ortiy:0 } }
点击后父组件就会将data里的数据绑定到子组件的props里
$emit
子组件改变父组件的值,通过$on将父组件的事件绑定到子组件,在子组件中通过$emit来触发$on绑定的父组件事件
先在父组件里将值绑定给子组件并监听子组件变化,格式如下
//HTML <nv-navv-on:child-say="listen"></nv-nav> //JS listen:function(mgs,orc,cel,ort){ this.mgse=mgs this.orctiy=orc this.vels=cel this.ortiy=ort }
之后在子组件data里建要改变的值,格式如下
mgs:-20.62, orc:0, cel:-1, ort:0
然后建个方法
dis:function(){ this.$emit('child-say',this.mgs,this.orc,this.cel,this.ort) }
给某个元属添加点击事件触发刚建的方法
<aside@click="dis"></aside>
有点乱,欢迎大家来纠正
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。