SOURCE

console 命令行工具 X clear

                    
>
console
//框架页
let Layout = {
    template: `
        <div class="container">
            <div class="aside">左侧菜单</div>    
            <!-- 通过:key绑定$router.fullPath值,当fullPath发生改变,触发组件重新渲染 -->
            <div class="main"><router-view :key="$route.fullPath"></router-view></div>
        </div>
    `,
    created() {
        console.log('框架页加载')
    }
}
//首页
let Home = {
    template: `
        <div>
            首页
            <button @click="onClick">刷新</button>
        </div>
    `,
    created() {
        console.log('首页加载')
    },
    methods: {
        onClick(){
            this.$router.push(`${this.$route.path}?t=${Date.now()}`)
        }
    },
}
//路由配置
let router = new VueRouter({
    routes: [
        {path: '/', component: Layout, children:[
            {path: '', component: Home}
        ]}
    ]
}) 
Vue.use(VueRouter)
//根组件
new Vue({
    router,
    el: '#app'
})
    <div id="app">
        <router-view></router-view>
    </div>
* {padding:0;margin:0;}
.container { padding: 10px;display: flex;flex-basis: auto;height: 100vh;box-sizing: border-box;}
.aside{ width:200px;background-color: #d3dce6; }
.main { flex: 1; }

本项目引用的自定义外部资源