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子路由设置、全局组件、局部组件的原生写法

猜你喜欢
