28.《嵌套路由之多级路由》

最新推荐文章于 2022-10-13 19:49:44 发布

@逆风微笑代码狗

最新推荐文章于 2022-10-13 19:49:44 发布

阅读量182

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44864082/article/details/106662256

版权

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

Vue Router 的多级路由实现。

改写路由配置，为需要添加多级路由的页面，添加children属性。

具体案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>嵌套路由之多级路由</title>
	</head>
	<!--1。引入文件-->
	<script type="text/javascript" src="js/vue.js" ></script>
	<script type="text/javascript" src="js/vue-router.js" ></script>
	<body>
		<div id='app'>
			
			<!--7.页面添加链接 和 视图区域-->
			<router-link to='/account'>账户0</router-link>
			
			<!--视图区域-->
			<router-view></router-view>
		</div>
		<!--3.创建模板-->
        <template id="account">
        	<div>
        	    <h1>账户面板</h1>
        	    <router-link to='/'></router-link>
        	    
        		<router-link to='/account/login'>登录</router-link>
		     	<router-link to='/account/register'>注册</router-link>
		     	<!--留出试图区域-->
		     	<router-view></router-view>
        	</div>
        </template>
        <template id="login">
        	<div>
        	    <h1>登陆面板</h1>
        		用户名：<input type="text" name="" id=""/><br/>
        		密码：<input type="password" name='' id=""/>
        	</div>
        </template>
        <template id="register">
        	<div>
        	    <h1>注册面板</h1>
        		用户名：<input type="text" name="" id=""/><br/>
        		密码：<input type="password" name='' id=""/>
        	</div>
        </template>
      
		<script>
			//创建模板
			var tempAccount={template:"#account"};
			var templogin={template:"#login"};
			var tempregister={template:"#register"}
			 //4.模板注册成组件
			 Vue.component('account',tempAccount);
			 Vue.component('login',templogin);
		     Vue.component('register',tempregister) 
			 //5.编写路由规则
			 var routeRules=new VueRouter({
			 	routes:[
				 	{
				 		path:'/account',
					 	component:tempAccount,
					 	//children也是一个数组
					 	children:[
					 	  //二级的多条路由规则 每个元素就是一条二级路由规则
					 	  {	path:'login',component:templogin},
					 	  {	path:'register',component:tempregister}
				 	     
				 	   ]
				 	},
			 	
//			 	{path:'/account/login',component:templogin},
//			 	{path:'/account/register',component:tempregister}
			 	]
			 });
			 
			var  vm=new Vue({
				el:'#app',
				//6.注册路由规则
				router:routeRules
				
				
			});
			//创建组件模板
			
		</script>
	</body>
</html>

@逆风微笑代码狗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
28.《嵌套路由之多级路由》

Vue Router 的多级路由实现。改写路由配置，为需要添加多级路由的页面，添加children属性。具体案例：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>嵌套路由之多级路由</title> </head>  <script type="text/javascript
复制链接

扫一扫