vue子路由设置、全局组件、局部组件的原生写法
<!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>
vue子路由设置、全局组件、局部组件的原生写法的更多相关文章
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue自定义组件(vue.use(),install)+全局组件+局部组件
相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...
- Vue(2)- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- vue-learning:13 - js - vue作用域概念:全局和局部
目录 全局作用域:Vue对象 全局api 局部作用域: 实例对象vm 实例api 组件component 组件配置选项 在引入Vue文件时,就相当于拥有了一个全局Vue对象. 在var vm = ne ...
- vue项目中设置全局引入scss,使每个组件都可以使用变量
在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...
- vue之element-ui设置全局弹出框
这样的需求,在主要功能完成后,需要进行交互效果的完善,需要给请求api的时候添加一个加载中的一个弹出框.但是每个页面每个页面过的话,会很费时间和精力,这里我们可以采用element-ui中的服务式弹出 ...
- Vue其他指令-组件-全局-局部-组件的交互父传子
v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...
- Vue 根组件,局部,全局组件 | 组件间通信,案例组件化
一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
随机推荐
- Java枚举相关知识
JAVA枚举 很多编程语言都提供了枚举的概念,但是java直到1.5之后才提出了枚举的概念,出现比这个语言本身晚10年. 主要作用是用于定义有限个数对象的一种结构(多例设计),枚举就属于多例设计并且其 ...
- 手把手教你搭建FastDFS集群(下)
手把手教你搭建FastDFS集群(下) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/u0 ...
- 第四篇.python的基础
目录 第四篇.python基础01 1. 变量 2. 常量 3. python变量内存管理 4. 变量的三个特征 5. 花式赋值 6. 注释 7. 数据类型基础 8. 数字类型 9. 字符串类型 10 ...
- mac下MySQL出现乱码的解决方法
之前写过一篇Linux下MySQL出现乱码的解决方法,本文说下mac下的处理,其实处理方式是一样的,我电脑的mysql版本是5.7.26-log 网上很多帖子都说去/usr/local/mysql/s ...
- 以tomcat镜像为基础部署war包后再做成镜像
#以交互的方式启动本地的镜像tomcat:hps,并且将本地目录/mnt/iso挂在到容器中的/tmp/repositories目录,方便从本地获取一些安装文件并进行一些操作 docker run - ...
- Makefile 编译静态库文件及链接静态库
本文为原创文章,转载需指明该文链接 1.代码目录结构如下: comm/ comm/inc/apue.h 3 atexit.c Makefile 5 staticlib/lib/ staticlib ...
- 关于php 7.4编译安装
一个不错的文章 https://hqidi.com/150.html 贴个地址就好啦, 借鉴了一把,很良心
- STM32 ARM调试问题总结
文章转载自:http://xfjane.spaces.eepw.com.cn/articles/article/item/77908 基于ADS的ARM调试有关问题总结 1. 在添加文件的过程中你可 ...
- python函数:函数参数、对象、嵌套、闭包与名称空间、作用域
今天的内容整理共有5部分 一.命名关键字参数 二.函数对象 三.函数的嵌套 四.名称空间与作用域 五.闭包函数 一.命名关键字参数 # 命名关键字参数: 在定义函数时,*与**之间参数称之为命名关键字 ...
- 线上MYSQL同步报错故障处理总结(转)
前言 在发生故障切换后,经常遇到的问题就是同步报错,数据库很小的时候,dump完再导入很简单就处理好了,但线上的数据库都150G-200G,如果用单纯的这种方法,成本太高,故经过一段时间的摸索,总结了 ...