解决“vue-router子路由默认视图不显示”问题

今天在看Vue学习视频，老师讲解vue-router多级路由的使用，在写完视频里的例子后，自己测试发现一个小问题（当时视频里没有提及），我是用name实现的路由之间的切换，其中一个有子路由，发现子路由的默认显示没有了（第一次默认有，第二次点击就没有了），又发现控制台有警告提示，所以我百度想要解决问题。很幸运很快找到解决方案：

针对vue-router子路由默认视图不显示这个问题，要有默认子路由，那父路由的名字name得去掉

下面是代码：（需要自己下载Vue.js和Bootstrap结合代码查看效果，图片自行更换，注意路径，路径正确可以直接运行）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>22-Vue-router的多级使用</title>
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<script type="text/javascript" src="Vue.js"></script>
	<script type="text/javascript" src="vue-router.js"></script>
	<style>
		body{
			background: #e8e8e8;
		}
	</style>
</head>
<body>

<div id="app">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-8 col-md-offset-2">
				<div class="row">
					<div class="col-md-2 col-md-offset-2">
						<div class="list-group">
							<!-- 使用router-link组件来导航 -->
							<!-- 通过传入‘to’属性指定链接 -->
							<!-- router-link 默认会被渲染成一个a标签 -->
							<router-link class="list-group-item" to='/h5'>HTML5学院</router-link>
							<!-- 针对vue-router子路由默认视图不显示这个问题，要有默认子路由，那父路由的名字name得去掉 -->
							<router-link class="list-group-item" :to="{name: 'java'}">Java学院</router-link>
							<router-link class="list-group-item" :to="{name: 'python'}">Python学院</router-link>
						</div>
					</div>
					<div class="col-md-6">
						<div class="panel">
							<div class="panel-body">
								<!-- 路由出口 -->
								<!-- 路由匹配到的组件将渲染在这里 -->
								<router-view></router-view>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<template id="h5">
	<div>
		<h1>HTML5</h1>
		<p>HTML5特别好</p>
		<img src="img/1.jpg" width="300" alt="">
		<div>
			<ul class="nav nav-tabs">
				<router-link to="/h5/basic">基础班</router-link>
				<router-link to="/h5/big">大神班</router-link>
			</ul>
		</div>
		<div>
			<!-- 路由出口 -->
			<!-- 路由匹配到的组件将渲染在这里 -->
			<router-view></router-view>
		</div>
	</div>
</template>

<template id="basic">
	<div>
		<h3>基础班</h3>
		<p>快速入门通道</p>
		<img src="img/1.jpg" width="100" alt="">
	</div>
</template>

<template id="big">
	<div>
		<h3>大神班</h3>
		<p>精通HTML5学习</p>
		<img src="img/2.jpg" width="100" alt="">
	</div>
</template>

<template id="java">
	<div>
		<h1>Java</h1>
		<p>Java需要掌握的知识很多</p>
		<img src="img/2.jpg" width="300" alt="">
	</div>
</template>

<template id="python">
	<div>
		<h1>Python</h1>
		<p>Python现在特别火爆</p>
		<img src="img/1.jpg" width="400" alt="">
	</div>
</template>



<script type="text/javascript">

	// 1.创建组件
	const Html5 = Vue.extend({
		template: '#h5'
	});

	const Basic = Vue.extend({
		template: '#basic'
	});

	const Big = Vue.extend({
		template: '#big'
	});

	const Java = Vue.extend({
		template: '#java'
	});

	const Python = Vue.extend({
		template: '#python'
	});

	// 2.定义路由
	const routes = [
		{
			path: '/h5',
			component: Html5,
			children: [
				{path:'basic', component: Basic},  //不写 ‘/’
				{path:'big', component: Big},
				// 配置根路由
				{path:'/', redirect: 'basic'}
			]
		},
		{path:'/java', component: Java, name: 'java'},
		{path:'/python', component: Python, name: 'python'},
		// 配置根路由
		{path:'/', redirect: '/h5'}
	];

	// 3.创建路由实例
	const router = new VueRouter({
		// routes: 'routes'
		routes
	});

	// 4.创建Vue的实例，并挂载
	new Vue({
		router
	}).$mount('#app');



 

</script>
</body>
</html>

Vue.js下载地址：（进入后找到下载位置右键将链接保存文件）

https://cn.vuejs.org/v2/guide/installation.html

解决“vue-router子路由默认视图不显示”问题

猜你喜欢