<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@3.1.3/dist/vue-router.js"></script>
</head>
<div id="app">
<p>{{message}}</p>
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<template id="tmpl">
<div>
<h1>这是Account组件123</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
</body>
<script>
var account={
template:'#tmpl'
}
var login={
template:'<h3>登录</h3>'
}
var register={
template:'<h3>注册</h3>'
}
var router=new VueRouter({
routes:[
{
path:'/account',
component:account,
children:[
{path:'login',component:login},
{path:'register',component:register}
]
},
// {path:'/account/login',component:login},
// {path:'/account/register',component:register}
]
})
let app=new Vue({
el:'#app',
data:{
message:'Hello World'
},
router
})
</script>
</html>
