路由表的组件群

Posted 2020-12-25 candy-yao

源码如下：

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘

Vue.use(VueRouter) //全局使用该组件

// 声明常量
const first = {
    template:‘<div>first内容</div>‘
}
const second = {
    template:‘<div>second内容</div>‘
}
const Home = {
    template:‘<div>Home内容</div>‘
}
const hehe = {
    template:‘<div>hehe呵呵</div>‘
}

const router = new VueRouter({
    mode:‘history‘,
    base:__dirname,//基础路径
    routes:[ //路由
        {
            path:‘/‘,
            components:{
                default:Home,
                left:first,
                right:second
            }
        },//当根目录时，显示Home
        {
            path:‘/first‘,
            components:{
                default:hehe,
                left:first,
                right:second
            }     
        }        
    ]
})

new Vue({
    router,
    template:`
    <div id="r">
        <h1>导航</h1>
        <p>{{$route.name}}</p>
        <ol>
            <li>
                <router-link to="/">/</router-link>               
            </li>                
            <li>
                <router-link to="/first">first</router-link>                
            </li>
        </ol>
        <router-view></router-view>
        <router-view name="left" style="height:200px;background-color:red;"></router-view>
        <router-view name="right" style="height:400px;background-color:yellow;"></router-view>
    </div>
    `
}).$mount(‘#app‘)//f发布到app中去