vue v-for循环生成router-link,含可用路由
接着上一篇的内容,使用循环来完成router-link的生成,并可以实现界面的路由(1)html部分实现循环对路由的配置核心:对路径的配置,红色部分。<p v-for="(operate,path,index) in navTo.operate" class="nav" @click="change(index)"&
接着上一篇的内容,使用循环来完成router-link的生成,并可以实现界面的路由
(1)html部分
实现循环对路由的配置核心:对路径的配置,红色部分。
<p v-for="(operate,path,index) in navTo.operate" class="nav" @click="change(index)">
<router-link :to="{ path: operate.path }">{{operate.name}}
</router-link>
<i class="el-icon-arrow-right right"></i>
</p>
(2)数据部分
export default {
name: 'HelloWorld',
data () {
return {
navTo:{
"operate":[
{"name":"系统1","path":'/header'},
{"name":"系统2","path":'/HelloWorld/engine'},
{"name":"系统3","path":'/HelloWorld/engine'},
{"name":"系统4","path":'/HelloWorld/engine'},
{"name":"系统5","path":'/HelloWorld/engine'},
{"name":"系统6","path":'/HelloWorld/engine'},
{"name":"系统7","path":'/HelloWorld/engine'},
{"name":"系统8","path":'/HelloWorld/engine'},
{"name":"系统9","path":'/HelloWorld/engine'},
{"name":"系统10","path":'/HelloWorld/engine'}
]
}
}
}
}
(3)index.js文件中对应组件的引入,详情见上一篇内容。
更多推荐
所有评论(0)