一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<div style="width: 10%;height:600px;border:1px solid pink;">
<router-link to="/login">注册</router-link>
<router-link to="/regist">登录</router-link>
<router-link to="/grxx">个人信息</router-link>
</div>
<div style="width:60%;height:600px;border:1px solid blue;">
<router-view></router-view>
</div>
</div>
</body>
<script>
// 创建三个组件
const login={
template:"<form action=\"\">\n" +
" 用户：<input type=\"text\"><br>\n" +
" 性别：<input type=\"radio\" name=\"sex\">男<input type=\"radio\" name=\"sex\">女<br>\n" +
" 年龄：<input type=\"number\"><br>\n" +
" <button>注册</button>\n" +
"</form>"
}
const regist={
template: "<form action=\"\">\n" +
" 用户：<input type=\"text\"><br>\n" +
" 密码：<input type=\"password\"><br>\n" +
" <button>登录</button>\n" +
"</form>"
}
const grxx={
template:"<form action=\"\">\n" +
" 姓名：<input type=\"text\"><br>\n" +
" 性别：<input type=\"radio\" name=\"sex\">男<input type=\"radio\" name=\"sex\">女<br>\n" +
" 年龄：<input type=\"number\"><br>\n" +
" <button>确定</button>\n" +
"</form>"
}
const vueRouter =new VueRouter({
mode:"history",
routes:[
{
path:'/login',component:login
},
{
path:'/regist',component: regist
},
{
path:'/grxx',component: grxx
}
]
})
new Vue({
el:"#app",
router:vueRouter
})
</script>
<style>
#app{
height: 600px;
border:1px red solid;
display: flex;
}
ul li{
margin-top: 15px;
list-style: none;
}
</style>
</html>
