vue-router嵌套路由的使用

最新推荐文章于 2023-07-22 16:30:03 发布

张小囧！冲呀！

最新推荐文章于 2023-07-22 16:30:03 发布

阅读量233

点赞数

分类专栏： vue 文章标签： vue javascript es6 html vue.js

本文链接：https://blog.csdn.net/zhangxiaojiong_zh/article/details/106458326

版权

vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

嵌套路由主要是指routes中的对应的一个路由匹配规则{}中还包含了一个children:[{}]参数,其中的[]对应的内容类似于routes；
场景：router-link“首页”对应的组件下面还包含了其它router-link（登陆和注册）,而点击登陆和注册后又与其它的组件相对应
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>vue-router动态路由参数params和查询参数query的使用</title>
	</head>
	<body>
		<div id='app'></div>
		<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
		<script type='text/javascript' src='node_modules/vue-router/dist/vue-router.js'></script>
		<script type='text/javascript'>
			let Home = {
				template:`
					<div>我是首页 <br/>
						<router-link :to='{name:"regist"}'>注册</router-link>
						<router-link :to='{name:"login"}'>登陆</router-link>
						<router-view></router-view>
					</div>
				`
			}

			let Login = {
				template:`
					<div>
						我是登陆
					</div>
				`
			}


			let Regist = {
				template:`
					<div>
						我是注册
					</div>
				`
			}

			let router = new VueRouter({
				routes:[
					{
						name:'home',
						path:'/home',
						component:Home,
						// children中的path无需再添加正斜杠/
						children:[
							{
								name:'login',
								path:'login',
								component:Login
							},
							{
								name:'regist',
								path:'regist',
								component:Regist
							}
						]
					}
				]
			})

			let App = {
				template:`
					<div>
						<router-link :to='{name:"home"}'>首页</router-link>
						<router-view></router-view>
					</div>
				`
			}

			let vm = new Vue({
				el:'#app',
				router,
				components:{
					App
				},
				template:`
					<App/>
				`
			})
		</script>
	</body>
</html>

结果：
（1）点击“首页”后，
在这里插入图片描述
（2）再次点击“注册”后，

（3）点击“登陆”后。因为登陆和注册对应显示的内容是在同一个router-view中，所以点击“登陆”后只显示Login组件中的内容

张小囧！冲呀！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-router嵌套路由的使用

嵌套路由主要是指routes中的对应的一个路由匹配规则{}中还包含了一个children:[{}]参数,其中的[]对应的内容类似于routes；场景：router-link“首页”对应的组件下面还包含了其它router-link（登陆和注册）,而点击登陆和注册后又与其它的组件相对应代码<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>vue-router动态路.
复制链接

扫一扫