首页 > 其他分享> 文章详细

Vue-Router学习

2021-05-16 13:03:32 阅读：93 来源： 互联网

标签：Vue name new 学习 xueyuan path var Router 路由

路由

1、后端路由

概念：根据不同的用户URL请求，返回不同的内容
本质：URL请求地址与服务器之间的对应关系

2、前端路由

概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

3、实现简易前端路由

~~ 基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）

监听window的onhashchange事件，根据获取到的最新的hash值，切换要显示的组件的名称
window.onhashchange = function(){
	//通过location.hash获取到最新的hash值
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟路由</title>
		<script src="../js/vue.min.js"></script>
		<style>
			#app > a{
				width: 50px;
				background-color: orange;
				border: 1px red solid;
			}
			
			#app{
				width: 200px;
				margin: auto;
				margin-top: 100px;
				text-align: center;
			}
			
			#app > h1{
				width: 200px;
				height: 200px;
				background-color: bisque;
				padding-top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 切换组件的超链接 -->
			<a href="#/zhuye">主页</a>
			<a href="#/keji">科技</a>
			<a href="#/caijing">财经</a>
			<a href="#/yule">娱乐</a>
			<component :is=conName></component><!-- 组件占位符 -->
		</div>
	</body>
	<script>
		//定义组件
		const zhuye = {
			template:'<h1>主页信息</h1>'
		}
		
		const keji = {
			template:'<h1>科技信息</h1>'
		}
		
		const caijing = {
			template:'<h1>财经信息</h1>'
		}
		
		const yule = {
			template:'<h1>娱乐信息</h1>'
		}
		
		// 实例
		var vm = new Vue({
			el:'#app',
			data:{
				conName:'caijing'
			},
			components:{/* 注册私有组件 */
				zhuye,
				keji,
				caijing,
				yule
			}
		})
	
		window.onhashchange = function(){
			/* 通过location.hash获取到最新的hash值 */
			switch(location.hash){
				case '#/zhuye':vm.conName = 'zhuye'
					break
				case '#/keji':vm.conName = 'keji'
					break
				case '#/caijing':vm.conName = 'caijing'
					break
				case '#/yule':vm.conName = 'yule'
					break
			}
		}
	</script>
</html>

在这里插入图片描述

4、Vue Router

一、功能：

支持HTML5历史模式或hash模式
支持嵌套路由
支持鹿有参数
支持编程式路由
支持命名路由

二、添加路由链接

router-link是Vue中提供的标签，默认会被渲染为a标签
to 属性默认会被渲染为href属性
to 属性的值默认会被渲染为 # 开头的hash地址

<router-link to="/user">用户</router-link>
<router-link to="/register">注册</router-link>

三、vue-router的基本使用
使用步骤：

引入相关的库文件

<script src="../js/vue.min.js"></script>
<script src="../js/vue-router.js"></script>

添加路由链接

<router-link to="/user">用户</router-link>
<router-link to="/register">注册</router-link>

定义路由组件

var user = {
	template:"#user"
}
		
var register = {
	template:"#register"
}

配置路由规则并创建路由实例

var vr = new VueRouter({
	//routes 路由规则数组
	routes:[
		//每个路由规则都是一个配置对象，其中至少包含path和component两个属性
		//path表示当前路由规则匹配的hash地址
		//component表示当前路由规则对应要求展示的组件
		{path:"/user",component:user},
		{path:"/register",component:register}
		
	]
})

把路由挂在到Vue根实例中

new Vue({
	el:"#app",
	//挂在路由实例对象
	router:vr
})

完整的路由简单实例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			
			<router-link to="/user">用户</router-link>
			<router-link to="/register">注册</router-link>
			
			<!-- 路由的占位符 -->
			<router-view></router-view>
		</div>
		<template id="user">
			<div>
				<h1>
					这是用户登录界面
				</h1>
			</div>
		</template>
		<template id="register">
			<div>
				<h1>
					这是用户注册界面
				</h1>
			</div>
		</template>
		
	</body>
	
	<script>
		var user = {
			template:"#user"
		}
		
		var register = {
			template:"#register"
		}
		
		//创建路由实例对象
		var vr = new VueRouter({
			//routes 路由规则数组
			routes:[
				//每个路由规则都是一个配置对象，其中至少包含path和component两个属性
				//path表示当前路由规则匹配的hash地址
				//component表示当前路由规则对应要求展示的组件
				{path:"/user",component:user},
				{path:"/register",component:register}
				
			]
		})
		
		new Vue({
			el:"#app",
			//挂在路由实例对象
			router:vr
		})
	</script>
</html>

结果演示
在这里插入图片描述

5、路由重定向

路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面，通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向

var vr = new VueRouter({
	//routes 路由规则数组
	routes:[
	//其中，path表示需要被重定向的原地址，redirect表示将要被重定向到的新地址
		{path:"/",redirect:"/user"},
		{path:"/user",component:user},
		{path:"/register",component:register}
		
	]
})

6、嵌套路由

1）嵌套路由功能分析

点击父路由链接显示模板内容
模板内容中又有子级路由链接
点击子级路由链接显示子级模板内容

2）父路由组件模板

父级路由链接
父组件路由填充位

<div id="app">
			
	<router-link to="/user">用户</router-link>
	<router-link to="/register">注册</router-link>
	
	<!-- 路由的占位符 -->
	<router-view></router-view>
</div>

3）子级路由用法

子级路由链接
子级路由填充

<div>
	<div>
		<h1>
			这是用户注册界面
		</h1>
	</div>
	<hr>
	<div>
		<!-- 子路由链接 -->
		<router-link to="/register/qq">QQ注册</router-link>
		<router-link to="/register/weixin">微信注册</router-link>
		<!--子路由填充位置-->
		<router-view></router-view>
	</div>
</div>

4）完整代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
		<script src="../js/vue-resource.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			
			<router-link to="/user">用户</router-link>
			<router-link to="/register">注册</router-link>
			
			<!-- 路由的占位符 -->
			<router-view></router-view>
		</div>
		<template id="user">
			<div>
				<h1>
					这是用户登录界面
				</h1>
			</div>
		</template>
		<template id="register">
			<div>
				<div>
					<h1>
						这是用户注册界面
					</h1>
				</div>
				<hr>
				<div>
					<!-- 子路由链接 -->
					<router-link to="/register/qq">QQ注册</router-link>
					<router-link to="/register/weixin">微信注册</router-link>
					<router-view></router-view>
				</div>
			</div>
		</template>
		
		<template id="qq">
			<div>
				<h3>
					QQ注册页面
				</h3>
			</div>
		</template>
		
		<template id="weixin">
			<div>
				<h3>
					微信注册页面
				</h3>
			</div>
		</template>
		
	</body>
	
	<script>
		var user = {
			template:"#user"
		}
		
		var register = {
			template:"#register"
		}
		
		var qq = {
			template:"#qq"
		}
		
		//子组件
		var weixin = {
			template:"#weixin"
		}
		
		//创建路由实例对象
		var vr = new VueRouter({
			//routes 路由规则数组
			routes:[
				{path:"/",redirect:"/user"},//路由重定向
				{path:"/user",component:user},
				{path:"/register",component:register,children:[//children数组表示子路由路径
					{path:"/register",redirect:"/register/qq"},
					{path:"/register/qq",component:qq},
					{path:"/register/weixin",component:weixin}
				]}
			]
		})
		
		new Vue({
			el:"#app",
			//挂在路由实例对象
			router:vr
		})
	</script>
</html>

5）效果展示
登录界面
](https://www.icode9.com/i/ll/?i=20210514122726238.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTk3MDE3,size_16,color_FFFFFF,t_70)

注册界面->qq注册界面在这里插入图片描述

注册界面->微信注册界面在这里插入图片描述

7、动态路由匹配

1）基本操作
应用场景：通过动态路由参数的模式进行路由匹配

模板

var router = new VueRouter({
	routes:[
	//动态路径参数，以冒号开头
		{path:"/user/:id",component:user}
	]
})

var user = {
	//路由组件中通过$route.params获取路由参数,其中的id属性是自定义属性，
	template:`<div>{{$route.params.id}}</div>`
}

定义路由链接

<div id="app">
	<router-link to="/xueyuan/计院">计院</router-link>
	<router-link to="/xueyuan/体院">体院</router-link>
	<router-link to="/xueyuan/美院">美院</router-link>
	<router-link to="/xueyuan/舞院">舞院</router-link>
	<router-link to="/xueyuan/地院">地院</router-link>
	
	<!-- 路由的占位符 -->
	<router-view></router-view>
</div>

路由参数定义

var vr = new VueRouter({
	//routes 路由规则数组
	routes:[
		{path:"/",redirect:"/xueyuan"},//路由重定向
		{path:"/xueyuan/:name",component:xueyuan},
		
	]
})

– 全部代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
		<script src="../js/vue-resource.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/xueyuan/计院">计院</router-link>
			<router-link to="/xueyuan/体院">体院</router-link>
			<router-link to="/xueyuan/美院">美院</router-link>
			<router-link to="/xueyuan/舞院">舞院</router-link>
			<router-link to="/xueyuan/地院">地院</router-link>
			
			<!-- 路由的占位符 -->
			<router-view></router-view>
		</div>
		<template id="xueyuan">
			<div>
				<h1>
					这是
					<div style="color: red;">
						{{$route.params.name}}
					</div>
					的主页
				</h1>
			</div>
		</template>
		
	</body>
	
	<script>
		var xueyuan = {
			template:"#xueyuan"
		}
		
		//创建路由实例对象
		var vr = new VueRouter({
			//routes 路由规则数组
			routes:[
				{path:"/",redirect:"/xueyuan"},//路由重定向
				{path:"/xueyuan/:name",component:xueyuan},
				
			]
		})
		
		new Vue({
			el:"#app",
			data:{},
			router:vr,
			methods:{}
		})
	</script>
</html>

效果展示

2）路由组件传递参数
$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦
1. props的值为布尔类型

语法格式：
const router = new VueRouter({
	routes:[
	//如果props被设置为true，route.params将会被设置为组件属性
	{path:"/xueyuan/:name",component:xueyuan,props:true}
]
})

const xueyuan = {
	props:["name"],//使用props接收路由参数
	template:`<div>学院{{name}}</div>`//使用路由参数
}

只需要修改动态路由中的部分代码
将template标签中的 {{$route.params.name}} 代码修改为 {{name}} 即可，如

<template id="xueyuan">
	<div>
		<h1>
			这是
			<div style="color: red;">
				{{name}}
			</div>
			的主页
		</h1>
	</div>
</template>

再在组件中添加props属性，如

var xueyuan = {
	props:["name"],
	template:"#xueyuan"
}

1. props的值为对象类型

const router = new VueRouter({
	routes:[
	//如果props被设置为true，route.params将会被设置为组件属性
	{path:"/xueyuan/:name",component:xueyuan,props:{username:'wcx',age:12}}
]
})

const xueyuan = {
	props:["username","age"],//使用props接收路由参数
	template:`<div>学院{{name}}</div>`//使用路由参数
}

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/xueyuan/计院">计院</router-link>
			<router-link to="/xueyuan/体院">体院</router-link>
			<router-link to="/xueyuan/美院">美院</router-link>
			<router-link to="/xueyuan/舞院">舞院</router-link>
			<router-link to="/xueyuan/地院">地院</router-link>
			
			<!-- 路由的占位符 -->
			<router-view></router-view>
		</div>
		<template id="xueyuan">
			<div>
				<h1>
					这是
					<div style="color: red;">
						学院：{{name}}
						姓名：{{username}}
						年龄：{{age}}
					</div>
					的主页
				</h1>
			</div>
		</template>
		
	</body>
	
	<script>
		var xueyuan = {
			props:["name","username","age"],//name不能被访问到了，只能接收props对象中的数据，其他的不行
			template:"#xueyuan"
		}
		
		//创建路由实例对象
		var vr = new VueRouter({
			//routes 路由规则数组
			routes:[
				{path:"/",redirect:"/xueyuan"},//路由重定向
				{path:"/xueyuan/:name",component:xueyuan,props:{username:"wcx",age:20}},
			]
		})
		
		new Vue({
			el:"#app",
			data:{},
			router:vr,
			methods:{}
		})
	</script>
</html>

代码效果
在这里插入图片描述

1. props的值为函数类型（既传递props对象中的值，也传递hash路由中的值（name值））

代码格式：
var vr = new VueRouter({
	//routes 路由规则数组
	routes:[
		{path:"/",redirect:"/xueyuan"},
		{path:"/xueyuan/:name",component:xueyuan,
		props:route => ({
			name:route.params.name,
			username:"wcx",
			age:20
		})}
	]
})


var xueyuan = {
	props:["name","username","age"],
	template:`<div>
				<h1>
					这是
					<div style="color: red;">
						学院：{{name}}
						姓名：{{username}}
						年龄：{{age}}
					</div>
					的主页
				</h1>
			</div>`
}

代码效果
在这里插入图片描述

8、命名路由

为了更加方便的表示路由的路径，可以给路由起一个别名，即为“命令路由”

代码格式：
var vr = new VueRouter({
	routes:[
		{
			name:'xueyuan',//命名路由
			path:"/xueyuan/:name",
			component:xueyuan,
			props:route => ({
			name:route.params.name,
			username:"wcx",
			age:20
		})}
	]
})


<router-link :to="{name:'xueyuan',params:{name:'美院'}}">美院</router-link>

注意：router-link标签中的params属性中对象中的键值对中的键（name）要和路由对象中的path中冒号后面的值相同，即path:"/xueyuan/:name"中的name

–完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/xueyuan/计院">计院</router-link>
			<router-link to="/xueyuan/体院">体院</router-link>
			<router-link :to="{name:'xueyuan',params:{name:'美院'}}">美院</router-link>
			<router-link to="/xueyuan/舞院">舞院</router-link>
			<router-link to="/xueyuan/地院">地院</router-link>
			
			<!-- 路由的占位符 -->
			<router-view></router-view>
		</div>
		<template id="xueyuan">
			<div>
				<h1>
					这是
					<div style="color: red;">
						学院：{{name}}
						姓名：{{username}}
						年龄：{{age}}
					</div>
					的主页
				</h1>
			</div>
		</template>
		
	</body>
	
	<script>
		var xueyuan = {
			props:["name","username","age"],
			template:"#xueyuan"
		}
		
		//创建路由实例对象
		var vr = new VueRouter({
			
			//routes 路由规则数组
			routes:[
				{path:"/xueyuan",redirect:"/xueyuan/体院"},
				
				{
					name:'xueyuan',
					path:"/xueyuan/:name",
					component:xueyuan,
					
					props:route => ({
					name:route.params.name,
					username:"wcx",
					age:20
				})}
			]
		})
		
		new Vue({
			el:"#app",
			data:{},
			router:vr,
			methods:{}
		})
	</script>
</html>

代码效果
在这里插入图片描述

9、编程式导航

1）页面导航的两种方式

申明式导航：通过点击链接实现导航的方式，叫做申明式导航

例如：普通网页中的<a></a>链接或vue中的<router-link></router-link>

编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做编程式导航

例如：普通页面中的location.href

2）Vue中实现编程式导航的常用API如下

this.$router.push(‘hash地址’) ——跳转到指定页面
this.$router.go(n)——实现前进和后退，n为正数表示前进，n为负数表示后退

3）例子

使用 this.$router.push(‘hash地址’) API实现
在组件里面添加一个按钮，作为触发器，

<div>
	<h1>
		这是
		<div style="color: red;">
			学院：{{name}},
			姓名：{{username}},
			年龄：{{age}}
		</div>
		的主页
	</h1>
	<button @click="goToPlace()">
		跳转到体院学院
	</button>
</div>

然后在组件里面添加一个函数，用于实现编程式导航跳转

methods:{
	goToPlace(){
		this.$router.push('/xueyuan/体院')
	}
}

完整代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/xueyuan/计院">计院</router-link>
			<router-link to="/xueyuan/体院">体院</router-link>
			<router-link :to="{name:'xueyuan',params:{name:'美院'}}">美院</router-link>
			<router-link to="/xueyuan/舞院">舞院</router-link>
			<router-link to="/xueyuan/地院">地院</router-link>
			
			<!-- 路由的占位符 -->
			<router-view></router-view>
		</div>
		<template id="xueyuan">
			<div>
				<h1>
					这是
					<div style="color: red;">
						学院：{{name}},
						姓名：{{username}},
						年龄：{{age}}
					</div>
					的主页
				</h1>
				<button @click="goToPlace()">
					跳转到体院学院
				</button>
			</div>
		</template>
		
	</body>
	
	<script>
		var xueyuan = {
			props:["name","username","age"],
			template:"#xueyuan",
			methods:{
				goToPlace(){
					this.$router.push('/xueyuan/体院')
				}
			}
		}
		
		//创建路由实例对象
		var vr = new VueRouter({
			
			//routes 路由规则数组
			routes:[
				{path:"/xueyuan",redirect:"/xueyuan/体院"},
				
				{
					name:'xueyuan',
					path:"/xueyuan/:name",
					component:xueyuan,
					
					props:route => ({
					name:route.params.name,
					username:"wcx",
					age:20
				})}
			]
		})
		
		new Vue({
			el:"#app",
			data:{},
			
			
			router:vr
		})
	</script>
</html>

代码效果
在这里插入图片描述

使用 this.$router.go(n) API实现
仍然在组件里面添加一个按钮，作为触发器

<button @click="GoBack()">
	返回到上一个页面
</button>

在组件中的methods添加函数GoBack()，

GoBack(){
	this.$router.go(-1)
}

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.min.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/xueyuan/计院">计院</router-link>
			<router-link to="/xueyuan/体院">体院</router-link>
			<router-link :to="{name:'xueyuan',params:{name:'美院'}}">美院</router-link>
			<router-link to="/xueyuan/舞院">舞院</router-link>
			<router-link to="/xueyuan/地院">地院</router-link>
			
			<!-- 路由的占位符 -->
			<router-view></router-view>
		</div>
		<template id="xueyuan">
			<div>
				<h1>
					这是
					<div style="color: red;">
						学院：{{name}},
						姓名：{{username}},
						年龄：{{age}}
					</div>
					的主页
				</h1>
				<button @click="goToPlace()">
					跳转到体院学院
				</button><br><br>
				<button @click="GoBack()">
					返回到上一个页面
				</button>
			</div>
		</template>
		
	</body>
	
	<script>
		var xueyuan = {
			props:["name","username","age"],
			template:"#xueyuan",
			methods:{
				goToPlace(){
					this.$router.push('/xueyuan/体院')
				},
				GoBack(){
					this.$router.go(-1)
				}
			}
		}
		
		//创建路由实例对象
		var vr = new VueRouter({
			
			//routes 路由规则数组
			routes:[
				{path:"/xueyuan",redirect:"/xueyuan/体院"},
				
				{
					name:'xueyuan',
					path:"/xueyuan/:name",
					component:xueyuan,
					
					props:route => ({
					name:route.params.name,
					username:"wcx",
					age:20
				})}
			]
		})
		
		new Vue({
			el:"#app",
			data:{},
			
			
			router:vr
		})
	</script>
</html>

代码效果

在这里插入图片描述
4）router.push()方法的参数规则

字符串（路径名称）

router.push('/home')

对象

router.push({path:'/home'})

命名的路由（传递参数）

router.push({name:'/user',params:{userId:1}})

带查询参数，变成/register?username=list

router.push({path:'/register',query:{username:'lisi'}})

9、基于Vue-router的案例

1）使用到的技术

路由的基础用法
嵌套路由
路由重定向
路由传参
编程式导航
2）根据项目的整体布局划分好组件的结构，通过路由导航控制组件的显示
抽离并渲染APP根组件
将左侧菜单改造为路由链接
在右侧主体区域添加路由占位符
添加子路由规则
通过路由重定向默认渲染用户组件
渲染用户列表数据
实现后退功能

项目的模板页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<style  type="text/css">
			#app > div{
				display: flex;
				border: 1px #FFFFFF solid;
				width: 60%;
				margin: auto;
			}
			
			#bodies > div{
				border: 1px #FFFFFF solid;
				text-align: center;
			}
			
			#left{
				width: 30%;
				color: white;
				background-color: #686868;
			}
			
			#right{
				width: 100%;
			}
			
			
			#header,#footer{
				background-color: #686868;
				
				
				
			}
			
			.list{
				border: 1px #FFFFFF solid;
				background-color: #b3b3b3;
			}
			
			h2,h6{
				margin: auto;
				color: white;
				margin-top: 10px;
				margin-bottom: 10px;
			}
			
			#bodies{
				height: 80%;
				
			}
			
			#app{
				height: 500px;
				margin-top: 80px;
				
			}
			
			td{
				border: 1px #B3B3B3 solid;
				width: 25%;
			}
			
			th{
				border: 1px #d3d3d3 solid;
				background-color: #b8b8b8;
			}
			
			table{
				width: 100%
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 头部区域 -->
			<div id="header">
				<h2>风雨之都后台管理</h2>
			</div>
			
			<!-- 中间区域 -->
			<div id="bodies">
				<!-- 左侧菜单栏 -->
				<div id="left">
					<div class="list">用户管理</div>
					<div class="list">权限管理</div>
					<div class="list">商品管理</div>
					<div class="list">订单管理</div>
					<div class="list">系统设置</div>
				</div>
				<!-- 右侧区域 -->
				<div id="right">
					<div>
						<table cellspacing="0px">
							<caption>用户管理区域</caption>
							<thead>
								<tr>
									<th>编号</th>
									<th>姓名</th>
									<th>年龄</th>
									<th>操作</th>
								</tr>
								<tr>
									<td>1</td>
									<td>李四</td>
									<td>20</td>
									<td><a>详情</a></td>
								</tr>
								<tr>
									<td>2</td>
									<td>王二</td>
									<td>21</td>
									<td><a>详情</a></td>
								</tr>
								<tr>
									<td>3</td>
									<td>麻子</td>
									<td>22</td>
									<td><a>详情</a></td>
								</tr>
								<tr>
									<td>4</td>
									<td>张三</td>
									<td>23</td>
									<td><a>详情</a></td>
								</tr>
							</thead>
							<tbody>
								
							</tbody>
						</table>
					</div>
					
				</div>
			</div>
			<!-- 尾部区域 -->
			<div id="footer">
				<h6>版权信息</h6>
			</div>
			
		</div>
		
		<template>
			
		</template>
		
	</body>
</html>

代码效果：
在这里插入图片描述

3）路由实现导航切换实战代码

前端页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<style  type="text/css">
			/* app（父组件）组件设置 */
			#app > #a > div{
				display: flex;
				border: 1px #FFFFFF solid;
				width: 60%;
				margin: auto;
			}
			/* 头部区域设置 */
			#bodies > div{
				border: 1px #FFFFFF solid;
				text-align: center;
			}
			/* 中间左边区域设置 */
			#left{
				width: 30%;
				color: white;
				background-color: #686868;
			}
			/* 中间右边区域设置 */
			#right{
				width: 100%;
				position: relative;
			}
			
			/* 头部和尾部区域背景色设置 */
			#header,#footer{
				background-color: #686868;
			}
			
			/* 左边导航栏设置 */
			.list{
				border: 1px #FFFFFF solid;
				background-color: #b3b3b3;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			/* 导航栏伪类设置 */
			.list:hover{
				background-color: #a1a1a1;
			}
			
			h2,h6{
				margin: auto;
				color: white;
				margin-top: 10px;
				margin-bottom: 10px;
			}
			/* 中间区域设置 */
			#bodies{
				height: 80%;
			}
			/* 中间区域设置 */
			#a{
				height: 500px;
				margin-top: 80px;
			}
			
			/* 用户管理区域表格设置 */
			td{
				border: 1px #B3B3B3 solid;
				width: 25%;
				
			}
			
			th{
				border: 1px #d3d3d3 solid;
				background-color: #b8b8b8;
				
			}
			
			tbody > tr:hover{
				background-color: #d9d9d9;
			}
			
			table{
				width: 100%
			}
			/* 路由链接字体颜色设置和去掉下超链接下划线 */
			a{
				text-decoration: none;
				color: white;
			}
			
			td > a{
				color: black;
			}
			
			td > a:hover{
				color: red;
			}
			
			/* 表格尾部设置 */
			tfoot{
				background-color: #b3b3b3;
			}
			/* 前进后退按钮设置 */
			.bnt{
				position: absolute;
				bottom: 20px;
				width: 100%;
			}
			/* 按钮位置设置 */
			.bnt-left{
				float: left;
			}
			
			.bnt-right{
				float: right;
			}
			/* 用户名样式标记 */
			.name_{
				color: #FFA500;
			}
		</style>
	</head>
	<body>
		<!-- 被Vue实例控制的区域 -->
		<div id="app">
			<!-- 路由占位符 -->
			<router-view></router-view>
			
		</div>
		<template  id="model_right">
			<div>
				<h3>权限管理区域</h3>
			</div>
		</template>
		
		<template  id="model_goods">
			<div>
				<h3>商品管理区域</h3>
			</div>
		</template>
		
		<template id="model_orders">
			<div>
				<h3>订单管理区域</h3>
			</div>
		</template>
		
		<template  id="model_settings">
			<div>
				<h3>系统设置区域</h3>
			</div>
		</template>
		
		<template id="model_users">
			<div>
				<table cellspacing="0px">
					<caption>
						<h3>用户管理区域</h3>
					</caption>
					<thead>
						<tr>
							<th>编号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in list" :key="item.id">
							<td>{{item.id}}</td>
							<td>{{item.Name}}</td>
							<td>{{item.age}}</td>
							<td>
								<a href="javascript:;" @click="goDetail(item.Name)">详情</a>
							</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td colspan="4"><h6>总共{{totall_people}}人</h6></td>
						</tr>
					</tfoot>
				</table>
			</div>
		</template>
		
		<template id="APP">
			<div id="a">
				<!-- 头部区域 -->
				<div id="header">
					<h2>风雨之都后台管理</h2>
				</div>
				
				<!-- 中间区域 -->
				<div id="bodies">
					<!-- 左侧菜单栏 -->
					<div id="left">
						<div class="list"><router-link to="/users">用户管理</router-link></div>
						<div class="list"><router-link to="/right">权限管理</router-link></div>
						<div class="list"><router-link to="/goods">商品管理</router-link></div>
						<div class="list"><router-link to="/orders">订单管理</router-link></div>
						<div class="list"><router-link to="/settings">系统设置</router-link></div>
					</div>
					<!-- 右侧区域 -->
					<div id="right">
						<div>
							<router-view></router-view>
						</div>
						<div class="bnt">
							<button @click="goback()" class="bnt-left">后退</button>
							<button @click="goforward()" class="bnt-right">前进</button>
						</div>
					</div>
				</div>
				<!-- 尾部区域 -->
				<div id="footer">
					<h6>版权信息</h6>
				</div>
			</div>
		</template>
		
		<template id="user_detail">
			<div>
				<div>
					<h1><span class="name_">{{name}}</span>的详情页</h1>
				</div>
				
			</div>
		</template>
		
	</body>
	
	<script type="text/javascript">
		axios.defaults.baseURL = "http://localhost:8080/practice210508/"
		
		// 创建组件
		var model_users = {
			template:"#model_users",
			data(){
				return{
					list:''
				}
			},
			methods:{
				queryData: async function(){
					var datas = await axios.get("CheckAccount")
					this.list = datas.data
				},
				goDetail(name){
					this.$router.push("/user_detail/"+name)
				}
			},
			//计算属性
			computed:{
				totall_people:function(){
					return this.list.length
				}
			},
			
			mounted(){
				this.queryData()
			}
		}
		
		var model_right = {
			template:"#model_right"
		} 
		
		var model_goods = {
			template:"#model_goods"
		}
		
		var model_orders = {
			template:"#model_orders"
		}
		
		var model_settings = {
			template:"#model_settings"
		}
		
		var APP = {
			template:"#APP",
			methods:{
				goback(){
					this.$router.go(-1)
				},
				goforward(){
					this.$router.go(1)
				}
			}
		}
		
		var user_detail = {
			props:["name"],
			template:"#user_detail",
			
		}
		// 创建路由对象
		var vr = new VueRouter({
			routes:[
				{path:"/",component:APP,redirect:"/users",children:[
					// {path:"/",redirect:"/users"},
					{path:"/users",component:model_users},
					{path:"/right",component:model_right},
					{path:"/goods",component:model_goods},
					{path:"/orders",component:model_orders},
					{path:"/settings",component:model_settings},
					{path:"/user_detail/:name",component:user_detail,props:true}
				]}
				
			]
		})
		
		var vm = new Vue({
			el:'#app',
			router:vr
		})
	</script>
</html>

后端服务器代码

package wcx;


import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;


/**
 * @author 风雨之都
 * @description: TODO
 * @date 2021/5/8 20:04
 */


@WebServlet("/CheckAccount")
public class CheckAccount extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //编码格式
        response.setContentType("text/html;charset=utf-8");
        //解决跨域问题
        request.setCharacterEncoding("utf-8");
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Method","POST,GET,OPTIONS,DELETE");
        response.setHeader("Access-Control-Allow-Header","Content-Type");
        response.setHeader("Access-Control-Allow-Header","x-requested-with");
        
        JSONArray jsonArray = new JSONArray();
		//下面数据也可以从数据库获取
        JSONObject jsonObject1=new JSONObject();
        jsonObject1.put("id","1");
        jsonObject1.put("Name","李四");
        jsonObject1.put("age",20);
        jsonObject1.put("date", new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));


        JSONObject jsonObject2 = new JSONObject();
        jsonObject2.put("id","2");
        jsonObject2.put("Name","王二");
        jsonObject2.put("age",21);
        jsonObject2.put("date",new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));

        JSONObject jsonObject3=new JSONObject();
        jsonObject3.put("id","3");
        jsonObject3.put("Name","麻子");
        jsonObject3.put("age",22);
        jsonObject3.put("date",new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));

        JSONObject jsonObject4=new JSONObject();
        jsonObject4.put("id","4");
        jsonObject4.put("Name","张三");
        jsonObject4.put("age",24);
        jsonObject4.put("date",new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));

        jsonArray.put(jsonObject1);
        jsonArray.put(jsonObject2);
        jsonArray.put(jsonObject3);
        jsonArray.put(jsonObject4);
        //将JSON数据返回到前台
        response.getWriter().write(jsonArray.toString());
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

代码效果
在这里插入图片描述

这是学习Vue-Router的学习笔记

标签：Vue,name,new,学习,xueyuan,path,var,Router,路由
来源： https://blog.csdn.net/qq_46197017/article/details/116771944

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue-Router学习

路由

1、后端路由

2、前端路由

3、实现简易前端路由

4、Vue Router

完整的路由简单实例代码

5、路由重定向

6、嵌套路由

7、动态路由匹配

8、命名路由

9、编程式导航

完整代码如下

完整代码

9、基于Vue-router的案例

项目的模板页面代码