嵌套路由的使用 [web前端][Vue框架]

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

96岁对抗java

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

阅读量361

点赞数

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

本文链接：https://blog.csdn.net/m0_57001006/article/details/125156840

版权

web前端专栏收录该内容

91 篇文章 1 订阅

订阅专栏

嵌套路由的使用

在实际编程中我们往往都是希望在一个路由中可以访问到另一个子路由

注意: 这时候我们说的是: 希望从一个父路由中访问其下的一个子路由中, 这里不是指的路由的切换, 而是直接在当前父路由对应的组件的页面中访问到子路由对应的组件的页面
如果我们是在一个路由中访问另一个不相关的路由的时候就会是直接切换到对应的不相关的路由路径中, 组件页面也会直接切换, 而我们此时想要的并不是切换页面的效果, 我们希望的是我们的原本的页面是没有跳转的, 只是在原本的页面中多呈现了一个内容, 就是呈现的我们想要显示的组件的内容

我们通过一个例子来说明嵌套路由的使用:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>嵌套路由</title>
		<!-- 导入vue.js文件 -->
		<script src="../../js/Vue.js"></script>
		<script src="../../js/vue-router.js"></script>
	</head>
	<body>
		<div id = "app">
			<!-- 注意: 我要要想访问到product路由组件对象的话,我们就必须要在id属性为app的标签中写上router-view标签 -->
			<!-- 因为我们的路由作用范围是id属性值为app的标签内部, 那么此时我们要访问到这个路由就要在id属性值为app的标签
			 内部, 并且我们还要加router-view标签, router-view标签的作用就是显示路由组件-->
			<router-view></router-view>
		</div>
		<!-- 使用外层路由和内层路由 -->
		<template id = "product">
		<div>
			<h1>商品管理</h1>
			<router-link to = "/product/add">商品添加</router-link>
			<router-link to = "/product/edit">商品编辑</router-link>
			
			<!-- 显示路由组件 -->
			<!-- 如果不做这个显示路由组件的操作, 那么即使我们访问到了当前的路由界面的时候也是不会显示当前的路由组件的 -->
			<router-view></router-view>
		</div>
		</template>
		
		<script>
			// 声明组件对象
			const product = {
				template : "#product"
			}
			const add = {
				template : "<h4>商品添加</h4>"
			}
			const edit = {
				template : "<h4>商品编辑</h4>"
			}
			
			//创建路由对象(含有嵌套路由(也就时子路由))
			const router = new VueRouter({
				routes : [
					{
						path : "/product",
						component : product,
						children : [
							{
								path : "add",
								component : add
							},
							{
								path : "edit",
								component : edit
							}
						]
					}
				]
			})
			
			// 创建Vue核心对象
			const app = new Vue({
				el : "#app",
				data : {
					
				},
				methods : {
					
				},
				router:router
			})
			
		</script>
	</body>
</html>

补充:

嵌套路由就是通过向一个路由对象的routes属性中的对象中的children属性中再写一个对象而实现的, 这个对象就可routes属性中的数组中的对象是一样的, 这个对象我们就称之为外层路由的子路由

96岁对抗java

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
嵌套路由的使用 [web前端][Vue框架]

补充:嵌套路由就是通过向一个路由对象的routes属性中的对象中的children属性中再写一个对象而实现的, 这个对象就可routes属性中的数组中的对象是一样的, 这个对象我们就称之为外层路由的子路由...
复制链接

扫一扫