嵌套路由

╰半橙微兮° 2022-06-01 00:23 267阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<script type="text/javascript" src="js/vue.js"></script>
    	<script type="text/javascript" src="js/vue-router.js"></script>
    </head>
    <body>
    	<div id="example">
    		<router-view></router-view>
    	</div>
    
    	<script type="text/javascript">
    		var Login=Vue.component('login-component',{
    			template:`
    				<div>
    					<h1>这是登录界面</h1>
    				</div>
    			`
    		});
    
    		var Mail=Vue.component('mail-component',{
    			methods:{
    				jump(desPath){
    					this.$router.push(desPath);
    				},
    				back(){
    					this.$router.go(-1); //手机端可以使用此方法来返回 -1表示后退，1表示前进
    				}
    			},
    			template:`
    				<div>
    					<h1>这是邮箱主界面</h1>
    					<button @click="back">返回</button>
    					<button @click="jump('/myInbox')">收件箱</button>
    					<button @click="jump('/myOutbox')">发件箱</button>
    					<router-view></router-view>
    				</div>
    			`
    		});
    
    		var Inbox=Vue.component('Inbox-component',{
    			template:`
    				<ul>
    					<li>收件箱1</li>
    					<li>收件箱2</li>
    					<li>收件箱3</li>
    				</ul>
    			`
    		});
    
    		var Outbox=Vue.component('Outbox-component',{
    			template:`
    				<ul>
    					<li>发件箱1</li>
    					<li>发件箱2</li>
    					<li>发件箱3</li>
    				</ul>
    			`
    		});
    
    		const myRoutes=[
    			{path:'',component:Login},
    			{path:'/myLogin',component:Login},
    			{
    				path:'/myMail',
    				component:Mail,
    				children:[
    					{path:'',component:Inbox},
    					{path:'/myInbox',component:Inbox},
    					{path:'/myOutbox',component:Outbox}
    				]
    			}
    		];
    
    		const myRouter=new VueRouter({
    			routes:myRoutes
    		})
    
    		new Vue({
    			el:'#example',
    			router:myRouter
    		})
    	</script>
    </body>
    </html>

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<script type="text/javascript" src="js/vue.js"></script>
    	<script type="text/javascript" src="js/vue-router.js"></script>
    </head>
    <body>
    	<div id="example">
    		<router-view></router-view>
    	</div>
    
    	<script type="text/javascript">
    		var Cart=Vue.component('cart',{
    			template:`
    				<h1>购物车</h1>
    			`
    		});
    
    		var Confirm=Vue.component('orderconfirm',{
    			methods:{
    				jump(desPath){
    					this.$router.push(desPath);
    				}
    			},
    			template:`
    				<div>
    				<h1>订单确认界面</h1>
    				<button @click="jump('/firstConfirm')">首次确认</button>
    				<button @click="jump('/secondConfirm')">再次确认</button>
    				<router-view></router-view>
    				</div>
    			`
    		});
    
    		var firstConfirm=Vue.component('firstorderconfirm',{
    			template:`
    				<p>请确认信息</p>
    			`
    		});
    
    
    		var secondConfirm=Vue.component('secondorderconfirm',{
    			template:`
    				<p>请再次确认信息</p>
    			`
    		});
    
    		
    		var NotFound=Vue.component('not-found',{
    			template:`
    				<h1>404 page not found</h1>
    			`
    		});
    
    		const myRoutes=[
    			{path:'',component:Cart},
    			{path:'/myCart/',component:Cart},
    			{
    				path:'/myConfirm/',
    				component:Confirm,
    				children:[
    					{path:'',component:firstConfirm},
    					{path:'/firstConfirm',component:firstConfirm},
    					{path:'/secondConfirm',component:secondConfirm}
    				]
    			},
    			{path:'*',component:NotFound}
    		];
    
    		const myRouter=new VueRouter({
    			routes:myRoutes
    		});
    
    		new Vue({
    			el:'#example',
    			router:myRouter
    		})
    	</script>
    </body>
    </html>