在vue的实际开发中往往会遇到公用一个组件的问题,比如有一个菜单中的两个按钮,点击每个按钮调用的是同一个组件,其内容是根据路由的参数的不同来请求不同的内容。
第一步,首先新建一个vue + webpack + vuecli的演示,如下操作:
全局安装vue-cli, vue-cil是vue的脚手架工具,安装命令:
npm安装- g vue-cli
第二步,进入到工程目录中,创建一个vuedemo的文件夹工程,如下两步操作:
cd vue_test_project//进入vue_test_project目录下
vue init webpack vuedemo//在vue_test_project目录下创建一个vuedemo工程
输入这个命令之后,会出现一些提示,是什么不用管,一直按回车即可。
第三步,如下操作:
cd vuedemo
npm安装
执行npm安装需要一点时间,因为会从服务器上下载代码啦之类的。并且在执行过程中会有一些警告信息。不用管,等着就是了。如果长时间没有响应,就按ctrl + c停止掉,然后再执行一次即可。
最后一步,操作如下:
npm运行dev
在运行了npm dev之运行后,会自动打开一个浏览器窗口,就可以看到实际的效果了。这个演示就创建好了。现在就在这个演示中添加一些内容,修改成如下:
修改HelloWorld.vue的内容为如下:
& lt; template>
& lt; div类=癶ello”比;
& lt; h2>{{味精}}& lt;/h2>
& lt; h3>基本Links
& lt; div类=癰tn”比;
& lt; router-link:="{名称:“内容”,参数:{differId:‘con1}}“祝辞内容按钮1 & lt;/router-link>
& lt; router-link:="{名称:“内容”,参数:{differId:‘con2}}“祝辞内容按钮2 & lt;/router-link>
& lt;/div>
& lt; router-view> & lt;/router-view>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“HelloWorld”,
数据(){
返回{
味精:“欢迎来到你的Vue。js应用”
}
}
}
& lt;/script>
& lt; scoped>风格;
h2、h3 {
粗细:正常;
}
ul {
list-style-type:没有;
填充:0;
}
李{
显示:inline-block;
保证金:0 10 px;
}
一个{
颜色:# 42 b983;
}
& lt;/style>
路由路由器下的index . html的修改为如下:
从“Vue”进口Vue
从“vue-router”进口路由器
从“@导入HelloWorld/组件/HelloWorld”
从“@/组件/conDetail”导入内容
Vue.use(路由器)
出口默认新路由器({
路线:[
{
路径:“/?
名称:“HelloWorld”,
组件:HelloWorld,
孩子:(
{名称:“内容”,路径:内容/:differId,组件:内容}
]
}
]
})
现在创建一个conDetail.vue了,如下:
& lt; template>
& lt; div类=跋嗤北?
这个是相同的内容
& lt; div类=癱onlist”比;
& lt;模板v=跋钕钅俊痹?
& lt; p> {{item.con}} & lt;/p>
& lt;/template>
& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:“conDetail”,
数据(){
返回{
味精:”,
differIdType:”,
conlist:(
{“反对”:“这是第一个内容按钮的内容1 '},
{“反对”:“这是第一个内容按钮的内容2 '}
),
项目:[],
}
}，
安装(){
这一点。differIdType=route.params美元。differId==甤on1 & # 63;' 0 ':' 1 ';
如果这一点。differIdType==0) {
这一点。项=this.conlist;
其他}{
这一点。项=[];
}
}，
看:{
$路线:函数(从){
这一点。differIdType=to.params。differId==甤on1 & # 63;' 0 ':' 1 ';
如果这一点。differIdType==0) {
这一点。项=this.conlist;
其他}{
这一点。项=[];
}
}
}
}
& lt;/script>
& lt; style>
& lt;/style>
结果就是,当点击内容按钮1,出现了对象的内容,点击内容按钮2,出现相应的内容。当然我这儿写的是点击按钮2的时候,其项目的内容为空数组。这儿也使用了美元路线的监听。
