Vue笔记--Router路由--VueRouter--二、命名视图

二、命名视图

1. 给router-view组件设置name属性，适用于router跳转之后需要显示多个router-view组件
2. 然后在路由规则配置中配置多个的template（默认的为defalut）

 <div id="app">
        <!-- 设置router组件 -->
        <router-link to='/'>首页</router-link>
        <router-link to='/title'>主题</router-link>
        <router-link to='/content'>内容</router-link>

        <router-view name='content'></router-view>
        <router-view></router-view>
    </div>

 <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
        // 路由的选择性配置（也可也放在VueRouter实例内部）
        const routes = [{
                path: '/',
                component: {
                    template: `<div>首页展示</div>`
                }
            },
            {
                path: '/title',
                component: {
                    template: `<div>主题展示</div>`
                }
            },
            {
                path: '/content',
                // 配置多个模板，default是默认的roter-view组件展示内容
                components: {
                    // template: `<div>内容展示</div>`
                    content: {
                        template: `<div>内容展示</div>`
                    },
                    default: {
                        template: `<div>命名展示</div>`
                    }

                }
            }
        ]
        // 创建VueRouter实例，并配置选项
        const router = new VueRouter({
            routes
        })
        // 挂载在vue实例上
        new Vue({
            el: '#app',
            router
        })
    </script>