Vue学习小结---------通过children属性设置子路由

最新推荐文章于 2024-05-03 11:08:18 发布

wennianzhu

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量409

点赞数 2

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/wennianzhu/article/details/106318398

版权

路由嵌套

<!DOCTYPE html>
<html lang="en">
<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="app">
		<router-link to="/account">Account</router-link>

		<router-view></router-view>
	</div>

	<template id="tmpl">
		<div>
			<h3>这是Account组件</h3>
			<router-link to="/account/login">登陆</router-link>
			<router-link to="/account/register">注册</router-link>

			<router-view></router-view>
		</div>
	</template>

	<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}
			]
		})

		var vm = new Vue({
			el:'#app',
			data:{},
			methods:{},
			router
		})
	</script>
</body>
</html>

效果展示
在这里插入图片描述

wennianzhu

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue学习小结---------通过children属性设置子路由

路由嵌套<!DOCTYPE html><html lang="en"><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">&lt
复制链接

扫一扫