嵌套路由

最新推荐文章于 2024-04-21 23:09:42 发布

转载最新推荐文章于 2024-04-21 23:09:42 发布 · 305 阅读

文章标签：

#嵌套路由

vue 专栏收录该内容

35 篇文章

订阅专栏

本文通过具体实例介绍了Vue.js中路由的应用，包括多个子组件的嵌套展示及导航操作。利用Vue Router实现了登录页面、邮件系统及购物车等场景的路径跳转与视图更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>