<!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子路由设置、全局组件、局部组件的原生写法的更多相关文章

  1. vue教程3-03 vue组件，定义全局、局部组件，配合模板，动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  2. vue自定义组件（vue.use()，install）+全局组件+局部组件

    相信大家都用过element-ui.mintui.iview等诸如此类的组件库,具体用法请参考:https://www.cnblogs.com/wangtong111/p/11522520.html ...

  3. Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  4. vue-learning：13 - js - vue作用域概念：全局和局部

    目录 全局作用域:Vue对象 全局api 局部作用域: 实例对象vm 实例api 组件component 组件配置选项 在引入Vue文件时,就相当于拥有了一个全局Vue对象. 在var vm = ne ...

  5. vue项目中设置全局引入scss，使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  6. vue之element-ui设置全局弹出框

    这样的需求,在主要功能完成后,需要进行交互效果的完善,需要给请求api的时候添加一个加载中的一个弹出框.但是每个页面每个页面过的话,会很费时间和精力,这里我们可以采用element-ui中的服务式弹出 ...

  7. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  8. Vue 根组件,局部,全局组件 | 组件间通信,案例组件化

    一 组件 <div id="app"> <h1>{{ msg }}</h1> </div> <script src=" ...

  9. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

随机推荐

  1. ubutnu18.04LTS 配置网卡新特性

    在Ubuntu16的时候配置网卡信息都是在 /etc/network/interfaces 下的,但是到了18,配置文件位置改为了/etc/netplan/*.yaml,配置配置内容如下: netwo ...

  2. springboot-oracle工程win下正常，centos下不能访问数据库

    工程在win下正常运行,部署到centos下出现下述异常: ### Error querying database. Cause: org.springframework.jdbc.CannotGet ...

  3. Java程序员转行大数据的优势

    大数据时代,中国IT环境也将面临重新洗牌,不仅仅是企业,更是程序员们转型可遇而不可求的机遇. 国内大多数大型互联网公司的程序员被称作研发工程师,但实际上国内几乎没有研发项目,只能叫做开发.开发程序员的 ...

  4. javascript的隐式类型转换（使(a==1&&a==2&&a==3) 成立）

    一些团队规定禁用 == 运算符换用=== 严格相等.以工程标准衡量,== 带来的便利性抵不上其带来的成本,团队协作时候你看到别人代码中的 ==,有些时候需要判断清楚作者的代码意图是确实需要转型,还是无 ...

  5. vue项目中实现图片懒加载的方法

    对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载.这样子对于页面加载性能上会有很大的提升,也提高了用户体验. 实 ...

  6. export CommonJS AMD ES6

    export https://www.cnblogs.com/fayin/p/6831071.html 导入文件: a  -  b  -  c  ,对象隔代消失,可转成函数返回  导入模块对象(命名) ...

  7. latex中文环境配置（针对北大模板，开题报告+中期答辩+毕业论文）

    最近自己在忙着开题,中文环境真的是emm 以下只针对北大的毕业论文模板,至于其他的中文环境没有尝试 主要是用不同的latex编辑器会报不同的错误,当然我最后还是统一成了pdflatex,经过无数次尝试 ...

  8. python lambda表达式的两种用处

    1 用处1定义匿名函数 不带参数的: a = ") 带参数的 b = lambda x, y:x * y 2 当函数作为参数时,直接为该函数传参. def func1(m, n): retu ...

  9. Java学习笔记【四、类、对象、接口】

    编程语言的发展 机器语言 过程语言 面向对象编程--封装.继承.多态 关键字 extends implements override overload super this static abstra ...

  10. U盘被识别但不显示盘符怎么样才能解决？

    很多朋友在将U盘插入电脑后,会发现右下角的任务栏虽然出现了U盘的图标,但是在我的电脑中并没有显示出U盘的盘符,也就无法继续对U盘进行操作.遇到这种情况该怎么办呢?下面好系统U盘启动就告诉大家相应的解决 ...