關鍵在於子路由中的path問題，path之前不要放/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登錄</router-link>
<router-view></router-view>
</div>
<template id="temp">
<div>
<h1>只是登錄組件</h1>
<router-link to="/login/male">男注冊</router-link>
<router-link to="/login/female">女注冊</router-link>
<router-view></router-view>
</div>
</template>
<script>
let login = {
template: '#temp',
data() {
return {
msg: '123'
}
}
};
let malereg = {
template: `<h2>這是男人注冊的組件</h2>`
};
let femalereg = {
template: `<h2>這是nv人注冊的組件</h2>`
};
let register = {
template: `<h1>這是一個注冊組件</h1>`,
data() {
return {
msg: '123'
}
}
};
let router = new VueRouter({
routes: [
{
path: '/login',
component: login,
children: [
{path: 'male', component: malereg}, // 這個path后面千萬不要放 /
{path: 'female', component: femalereg},
]
},
]
});
let vm = new Vue({
el: '#app',
data: {},
methods: {},
router
})
</script>
</body>
</html>
