028_vue路由嵌套

最新推荐文章于 2025-03-01 18:51:41 发布

自由与束缚JavaJavaScript

最新推荐文章于 2025-03-01 18:51:41 发布

阅读量190

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122900470

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

1. 嵌套路由功能分析

1.1. 点击父级路由链接显示模板内容。

1.2. 模板内容中又有子级路由链接。

1.3. 点击子级路由链接显示子级模板内容。

2. 嵌套路由用法

2.1. 父路由组件模板。

2.2. 子路由组件模板。

2.3. 嵌套路由匹配, 父路由通过children属性配置子路由。

3. 嵌套路由例子

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>路由嵌套</title>
	</head>
	<body>
		<div id="app">
			<!-- 1. 父路由链接 -->
			<router-link to="/zhuye">zhuye</router-link>
      		<router-link to="/keji">keji</router-link>

      		<!-- 2. 父路由组件占位符 -->
      		<router-view></router-view>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script src="vue-router_3.0.2.js"></script>
		<script type="text/javascript">
			var zhuye = {
	        	template: '<h1>主页信息</h1>'
	      	};

	      	var keji = {
	        	template: `
	        		<div>
	        			<h1>科技信息</h1>
	        			<hr/>

			          	<!-- 1. 子路由链接 -->
			          	<router-link to="/keji/tab1">tab1</router-link>
			          	<router-link to="/keji/tab2">tab2</router-link>

			          	<!-- 2. 子路由的占位符 -->
			          	<router-view />
			        </div>
	        	`
	      	};

	      	var tab1 = {
	        	template: '<h3>tab1 子组件</h3>'
	      	};

	      	var tab2 = {
	        	template: '<h3>tab2 子组件</h3>'
	      	};

	      	// 创建路由实例对象
      		var router = new VueRouter({
        		// 所有的路由规则
        		routes: [
        			{ path: '/', redirect: '/zhuye' },
          			{ path: '/zhuye', component: zhuye },
          			{ path: '/keji', component: keji, 
          				// 通过children属性, 为path: '/keji'添加子路由规则
          				children: [
          					{ path: '/', redirect: '/keji/tab1' },
            				{ path: '/keji/tab1', component: tab1 },
            				{ path: '/keji/tab2', component: tab2 }
          				]
          			}
        		]
     		});

			var vm = new Vue({
				el: "#app",
				data: {

				},
				// 挂载路由实例对象
        		// router: router
        		router
			});
		</script>
	</body>
</html>

3.2. 效果图