vue子路由设置、全局组件、局部组件的原生写法
2023-09-11 14:19:39 时间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script> </head> <style> .view{ width:300px; height:300px; background:purple; } .childView{ width:100px; height:100px; background:green; } .aa{ width:100px; height:70px; background:yellow; } .bb{ width:100%; height:50px; background:cyan; } </style> <body> <div id="app"> <com1></com1> <com2></com2> <div class="view"> <router-link to="/com2">com2</router-link> <router-view></router-view> </div> </div> <template id="childcom"> <div> 我是子路由 </div> </template> <template id="another"> <div> <router-link to="/com2/com4">我是另一个路由</router-link> <div class="bb"> <router-view></router-view> </div> </div> </template> <script> var objarr=[ {id:0,text:"二"}, {id:1,text:"三"}, {id:2,text:"四"}, {id:3,text:"五"}, {id:4,text:"六"}, {id:5,text:"七"} ] var component1={//局部组件 data(){ return{ aaa:objarr } }, template:`<div> 局部组件 <div v-for="(item,index) in aaa"> <span>{{ item.id }}</span> <span>{{ item.text }}</span> </div> </div>` } //声明个全局组件 Vue.component("com2",{ template:`<div> 全局组件 <div v-for="(item,index) in bbb" :key="index"> <span>{{ item.id }}</span> <span>{{ item.text }}</span> </div> </div>`, data(){ return{ bbb:objarr } }, }) // router const routes = [ { path: '/', component: component1 }, { path: '/com2', component:{template:'#another'}, children:[ { path:'com4', component:{template:"#childcom"} } ] } ] const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) new Vue({ el:"#app", components:{ com1:component1 }, router }) </script> </body> </html>
相关文章
- 从0搭建vue后台管理项目到颈椎病康复指南(一)
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- vue-cli 工程中引入jquery
- vue elementui el-select通过@Change触发事件
- vue商城项目开发:底部导航菜单(路由)
- 【视频】vue组件之props属性
- vue+elementui 项目el-menu导航栏实现路由跳转及当前项的设置
- vue获取当前路由
- vue怎样给v-for循环出来的元素动态设置不同的样式
- 怎么获取vue项目的配置项?比如获取ip地址和端口
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- 【Jeecg Vue】通过getAction的finally来最大程度避免影响主数据呈现
- Vue Router路由变化router-view视图不刷新
- Vue学习之--------路由的query、params参数、路由命名(3)(2022/9/5)
- vue中父子组件值的传递
- Vue前端路由
- Vue中vue-i18n结合vant-ui实现国际化
- 174:vue+openlayer: 经纬度坐标与屏幕坐标pixel转换,transformExtent将区间坐标由4326转换为3857
- 161:vue+openlayers 绘制多边形,限定最小边数4和最大边数6
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue: vue-router路由