Vue
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<p>
<router-link to="/home">/home</router-link>
</p>
<router-view></router-view>
</div>
Vue
const Home = {
template: `
<div class="user">
<h2>HomeBasic</h2>
<router-view></router-view>
</div>
`
}
const HomeIndex = { template: '<div>HomeIndex</div>' }
const HomeAnotherChild = { template: '<div>HomeAnotherChild</div>' }
const router = new VueRouter({
routes: [
{ path: '/home', components:{ default: Home},
children: [
{ path: '/home', component: HomeIndex },
{ path: 'profile', component: HomeAnotherChild }
]
}
]
})
const app = new Vue({ router }).$mount('#app')