使用Vue。js做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的href,于是vue-router应运而生
官方文档请点击这里
<强> # # vue-router
第一步当然是安装了,用npm安装命令
npm安装vue-router——save-dev
第二步在。vue组件里添加标签,格式如下
& lt; div id=坝τ谩北?
& lt; p>
& lt; !——使用router-link组件来导航。——比;
& lt; !——通过传入”到“属性指定在主。js文件设置的别名链接,如/1——比;
& lt; !- & lt; router-link>默认会被渲染成一个‘& lt; a>标签——比;
& lt; router-link="/1 "祝辞去Foo
& lt;/p>
& lt; !——路由出口——比;
& lt; !——点击& lt; router-link>的时候指定的页面将渲染在这里——比;
& lt; router-view> & lt;/router-view>
& lt;/div>
之前
第三步在主要。js文件里配置路,由格式如下
从“vue-router”进口VueRouter//1。定义(路由)组件。//加载组件
从“进口Page01。/max’
Vue.use (VueRouter)//全局安装路由功能//2。定义路由//每个路由应该映射一个组件。
const路线=[
{路径:/1,组件:Page01}//前面,指定的地方路径/1
]//3。创建路由器实例,然后传“路线”配置
const路由器=new VueRouter ({
路线
}）//4。创建和挂载根实例。//记得要通过路由器配置参数注入路由,//从而让整个应用都有路由功能
新Vue ({
埃尔:“#应用”,
模板:& lt; App/祝辞,
组件:{应用},
路由器
}）//现在,就可以重启试试了!
之前
注意<代码>路线/代码>和<代码>路由器>
路由就是这么的简单!
父组件向子组件传值
在子组件里添加<代码> prors>
道具:[
“rimag”,
“透明”,
“水平”,
“ohyaline”
),
然后是在父组件里向子组件里传值,格式如下
//HTML
& lt; nv-nav: rimag=mgse:透明=ortiy:水平=韦尔:ohyaline=orctiy> & lt;/nv-nav>//传值用绑定//JS
数据(){
返回{
mgse: -20.62,
orctiy: 0,
韦尔:1、
ortiy: 0
}
}
之前
点击后父组件就会将数据里的数据绑定到子组件的道具里
子组件改变父组件的值,通过对美元将父组件的事件绑定到子组件,在子组件中通过美元发出来触发美元绑上定的父组件事件
先在父组件里将值绑定给子组件并监听子组件变化,格式如下
//HTML
& lt; nv-nav v: child-say="听"祝辞& lt;/nv-nav>//JS
听:函数(mgs,兽人,玻璃纸,ort) {
这一点。mgse=毫克
这一点。orctiy=兽人
这一点。韦尔=玻璃纸
这一点。ortiy=支持
}
之前
之后在子组件数据里建要改变的值,格式如下
机动式:-20.62,
兽人:0,
移动电话:1、
支持:0
然后建个方法
说:函数(){
这一点。发出(child-say,美元。生产,这。兽人,这。玻璃纸,this.ort)
}
之前
给某个元属添加点击事件触发刚建的方法
& lt;除了@click="说"祝辞& lt;/aside>
有点乱,欢迎大家来纠正
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
