Vue-路由4 单路由多组件

Vue-路由4 单路由多组件


一、说明

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

二、代码示例


<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">


        <router-view>router-view>

        <router-view name="register">router-view>

        <router-view name="logout">router-view>
    div>


    <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>

页面效果:
Vue-路由4 单路由多组件_第1张图片


更新时间:2019-12-22

你可能感兴趣的:(Vue)