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