Vue-路由4 单路由多组件

一、说明

在一个路由中存在多个组件时，可以通过router-view元素的name属性来指定要渲染的组件，若不指定则为默认组件
在路由中通过components配置多个组件，每个组件都有一个对应的名称，默认组件名称用default标识

二、代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
</head>
<body>
    <div id="app">
<!--        5.路由渲染-->
<!--        默认组件（登录组件）-->
        <router-view></router-view>
<!--        注册组件，通过name属性指定对应的组件名-->
        <router-view name="register"></router-view>
<!--        注销组件，通过name属性指定对应的组件名-->
        <router-view name="logout"></router-view>
    </div>

<!--    1.创建多个组件模板-->
    <template id="login">
        <h1>登录组件</h1>
    </template>
    <template id="register">
        <h1>注册组件</h1>
    </template>
    <template id="logout">
        <h1>注销组件</h1>
    </template>
<script>
    // 2.创建组件模板对象
    var login = {template: '#login'}
    var register = {template: '#register'}
    var logout = {template: '#logout'}

    // 3.创建路由实例
    var router = new VueRouter({
        routes: [
            {
                path: '/',
                components: { // 注意：这是一个对象，对象内容为组件模板对象
                    default: login,     //默认组件
                    register,   // 相当于 register: register
                    logout
                }
            }
        ]
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router // 4.注册路由
    })
</script>
</body>
</html>

页面效果：
在这里插入图片描述

更新时间：2019-12-22

来源：CSDN

作者：SevenSongyun

链接：https://blog.csdn.net/SevenSongyun/article/details/103653669

标签

路由

vue

vue路由