vue中在一个页面中引用另一个router-view

最新推荐文章于 2024-09-03 21:36:07 发布

阿飞神奇

最新推荐文章于 2024-09-03 21:36:07 发布

阅读量2.3k

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_37875903/article/details/107377995

版权

1.被引入的vue组件：

<template>
    <el-row :gutter="20" class="index">
        <el-col :xs="4">
            <div class="grid-content bg-purple-light">A</div>
        </el-col>
        <el-col :xs="4">
            <div class="grid-content bg-purple">B</div>
        </el-col>
        <el-col :xs="8">
            <div class="grid-content bg-purple-dark">C</div>
        </el-col>
        <el-col :xs="8">
            <div class="grid-content bg-purple">D</div>
        </el-col>
        <el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:4}" :md="{span:12,offset:6}">
            <el-button type="success">e</el-button>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "index"
    }
</script>

<style lang="less" scoped>
    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: blue;
    }

    .bg-purple {
        background: red;
    }

    .bg-purple-light {
        background: yellow;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

</style>

2在.主页面中进行引入：

<template>
	<div> <index></index></div>
</template>
<script>
	//import路由
    import index from '../components/main/Index.vue'
    export default {
    	//在components中命名路由的名称
        components: {
            index
        },
 </script>

3.不需要在router.js中注册这个被引入的路由。已经完成。