Vue--路由

最新推荐文章于 2025-11-07 11:48:56 发布
原创 最新推荐文章于 2025-11-07 11:48:56 发布 · 277 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #javascript #js #vue.js #前端

本文详细介绍了Vue项目的路由应用，包括前端路由的概念、配置与使用，如一级和二级路由的设定，路由参数传递，以及编程式路由的方法。同时，深入探讨了导航守卫，包括全局守卫、路由独享守卫和组件内的守卫，通过实例展示了导航守卫的工作流程和应用场景。

路由

简介
路由在Vue项目开发中较为广泛，复杂项目中多个页面间的跳转都需要用到路由。

什么是路由
在这里插入图片描述
前端路由及后端路由
在这里插入图片描述

在这里插入图片描述
使用步骤
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
一级路由配置
在这里插入图片描述

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>一级路由</title>
		<!--导入Vue及路由-->
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
		<script type="text/javascript" src="js/vue-router-3.0.1.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--编写路由链接: 类似a标签,作为1个跳转热点内容-->
			<router-link to="/login">login</router-link>
			<router-link to="/zhuce">zhuce</router-link>
			<!--创建路由出口: 专门用于展示路由资源的位置-->
			<router-view></router-view>
		</div>
		
		<!--模板-->
		<template id="logintp">
			<h1>登录</h1>
		</template>
		<template id="zhucetp">
			<h1>注册</h1>
		</template>
		<script type="text/javascript">
			//创建路由对象: 路由规则{连接A--->资源A,连接B--->资源B....}
			var myrouter = new VueRouter({
				//设置路由匹配规则: routes
				routes:[
					{path:"/login",component:{template:"#logintp"}},
					{path:"/zhuce",component:{template:"#zhucetp"}}
				]
			});
			var vm = new Vue({
				el:"#app",
				router:myrouter //将路由对象挂载到Vue对象中
			});
		</script>
	</body>
</html>

结果
点击login
在这里插入图片描述
点击zhuce
在这里插入图片描述

二级路由
在这里插入图片描述

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>二级路由</title>
		<!--导入Vue及路由-->
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
		<script type="text/javascript" src="js/vue-router-3.0.1.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--编写路由链接: 类似a标签,作为1个跳转热点内容-->
			<router-link to="/login">login</router-link>
			<router-link to="/zhuce">zhuce</router-link>
			<!--创建路由出口: 专门用于展示路由资源的位置-->
			<router-view></router-view>
		</div>
		
		<!--一级路由组件内容-->
		<!--一级路由登录模板-->
		<template id="logintp">
			<div>
				<!--编写二级路由链接: 类似a标签,作为1个跳转热点内容-->
				<router-link to="/login/qq">qq</router-link><br />
				<router-link to="/login/weixin">微信</router-link><br />
				<!--创建二级路由出口: 专门用于展示路由资源的位置-->
				<router-view></router-view>
			</div>
		</template>
		<!--一级路由注册模板-->
		<template id="zhucetp">
			<div>
				<!--编写二级路由链接: 类似a标签,作为1个跳转热点内容-->
				<router-link to="/zhuce/shouji">手机</router-link><br />
				<router-link to="/zhuce/carid">身份证</router-link><br />
				<!--创建二级路由出口: 专门用于展示路由资源的位置-->
				<router-view></router-view>
			</div>
		</template>
		<!--二级路由模板-->
		<template id="qqtp">
			<span>qq登录</span>
		</template>
		<template id="weixintp">
			<span>微信登录</span>
		</template>
		<template id="shoujitp">
			<span>手机号注册</span>
		</template>
		<template id="caridtp">
			<span>身份证号注册</span>
		</template>
		<script type="text/javascript">
			//创建路由对象: 路由规则{连接A--->资源A,连接B--->资源B....}
			var myrouter = new VueRouter({
				//设置路由匹配规则: routes
				routes:[
					{path:"/login",component:{template:"#logintp"},
						//定义二级路由匹配规则
						children:[
							{path:"qq",component:{template:"#qqtp"}},
							{path:"weixin",component:{template:"#weixintp"}}
						]
					},
					{path:"/zhuce",component:{template:"#zhucetp"},
						children:[
							{path:"shouji",component:{template:"#shoujitp"}},
							{path:"carid",component:{template:"#caridtp"}}
						]
					}
				]
			});
			var vm = new Vue({
				el:"#app",
				router:myrouter //将路由对象挂载到Vue对象中
			});
		</script>
	</body>
</html>

结果
点击login在点击qq的话
在这里插入图片描述
点击login在点击微信的话
在这里插入图片描述
路由传参
在这里插入图片描述
示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>路由传参</title>
		<!--导入Vue及路由-->
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
		<script type="text/javascript" src="js/vue-router-3.0.1.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--编写路由链接: 类似a标签,作为1个跳转热点内容-->
			<router-link to="/login/:1/:张三">login</router-link>
			<router-link to="/zhuce?id=2&name=李四">zhuce</router-link>
			<!--创建路由出口: 专门用于展示路由资源的位置-->
			<router-view></router-view>
		</div>
		
		<!--模板-->
		<template id="logintp">
			<!--使用插值表达式显示传来的数据-->
			<h1>登录 参1{{$route.params.id}},参2{{$route.params.name}}</h1>
		</template>
		<template id="zhucetp">
			<h1>注册  参1{{$route.query.id}},参2{{$route.query.name}}</h1>
		</template>
		<script type="text/javascript">
			//创建路由对象: 路由规则{连接A--->资源A,连接B--->资源B....}
			var myrouter = new VueRouter({
				//设置路由匹配规则: routes
				routes:[
					{path:"/login/:id/:name",component:{template:"#logintp"}},//ROST方式传参
					{path:"/zhuce",component:{template:"#zhucetp"}}//URL方式传参
				]
			});
			var vm = new Vue({
				el:"#app",
				router:myrouter //将路由对象挂载到Vue对象中
			});
		</script>
	</body>
</html>

结果
点击login
在这里插入图片描述
点击zhuce
在这里插入图片描述

编程式路由
在这里插入图片描述

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>编程式路由</title>
		<!--导入Vue及路由-->
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
		<script type="text/javascript" src="js/vue-router-3.0.1.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--编写路由链接: 类似a标签,作为1个跳转热点内容-->
			<!--使用按钮替代router-link标签-->
			<button @click="tologin">登录</button>
			<button @click="tozhuce">注册</button>
			<!--创建路由出口: 专门用于展示路由资源的位置-->
			<router-view></router-view>
		</div>
		
		<!--模板-->
		<template id="logintp">
			<h1>登录</h1>
		</template>
		<template id="zhucetp">
			<h1>注册</h1>
		</template>
		<script type="text/javascript">
			//创建路由对象: 路由规则{连接A--->资源A,连接B--->资源B....}
			var myrouter = new VueRouter({
				//设置路由匹配规则: routes
				routes:[
					{path:"/login",component:{template:"#logintp"}},
					{path:"/zhuce",component:{template:"#zhucetp"}}
				]
			});
			var vm = new Vue({
				el:"#app",
				router:myrouter, //将路由对象挂载到Vue对象中
				methods:{
					tologin:function(){
						//实现路由跳转的功能
						this.$router.push({path:"/login"});
					},
					tozhuce:function(){
						this.$router.push({path:"/zhuce"});
					}
				}
			});
		</script>
	</body>
</html>

结果
点击登录
在这里插入图片描述
点击注册
在这里插入图片描述

编程式路由的其他方法
在这里插入图片描述

导航守卫

介绍
在这里插入图片描述
导航守卫解析流程
在这里插入图片描述

全局守卫
全局前置导航守卫
在这里插入图片描述

全局后置导航守卫
在这里插入图片描述
示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>全局导航守卫</title>
		<!--导入Vue及路由-->
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
		<script type="text/javascript" src="js/vue-router-3.0.1.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--编写路由链接: 类似a标签,作为1个跳转热点内容-->
			<router-link to="/login">login</router-link>
			<router-link to="/zhuce">zhuce</router-link>
			<!--创建路由出口: 专门用于展示路由资源的位置-->
			<router-view></router-view>
		</div>
		
		<!--模板-->
		<template id="logintp">
			<h1>登录</h1>
		</template>
		<template id="zhucetp">
			<h1>注册</h1>
		</template>
		<script type="text/javascript">
			//创建路由对象: 路由规则{连接A--->资源A,连接B--->资源B....}
			var myrouter = new VueRouter({
				//设置路由匹配规则: routes
				routes:[
					{path:"/login",component:{template:"#logintp"}},
					{path:"/zhuce",component:{template:"#zhucetp"}}
				]
			});
			//全局前置导航守卫: 所有路由跳转之前,执行此方法
			myrouter.beforeEach(function(to,from,next){
				console.log("beforeEach来自："+from.path);//来自哪里
				console.log("beforeEach去哪："+to.path);//去往哪里
				next();//释放链接next({path:...})
			});
			//全局后置导航守卫: 所有路由跳转之后,执行此方法
			myrouter.afterEach(function(to,from){
				console.log("afterEach来自："+from.path);//来自哪里
				console.log("afterEach去哪："+to.path);//去往哪里
			});
			var vm = new Vue({
				el:"#app",
				router:myrouter //将路由对象挂载到Vue对象中
			});
		</script>
	</body>
</html>

结果
点击login
在这里插入图片描述
点击zhuce
在这里插入图片描述
如果把next（）注释掉的话

//全局前置导航守卫: 所有路由跳转之前,执行此方法
			myrouter.beforeEach(function(to,from,next){
				console.log("beforeEach来自："+from.path);//来自哪里
				console.log("beforeEach去哪："+to.path);//去往哪里
				//next();//释放链接next({path:...})
			});

结果
点击login不显示登录也不会执行后置守卫。
在这里插入图片描述
路由独享守卫
在这里插入图片描述

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>路由独享守卫</title>
		<!--导入Vue及路由-->
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
		<script type="text/javascript" src="js/vue-router-3.0.1.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--编写路由链接: 类似a标签,作为1个跳转热点内容-->
			<router-link to="/login">login</router-link>
			<router-link to="/zhuce">zhuce</router-link>
			<!--创建路由出口: 专门用于展示路由资源的位置-->
			<router-view></router-view>
		</div>
		
		<!--模板-->
		<template id="logintp">
			<h1>登录</h1>
		</template>
		<template id="zhucetp">
			<h1>注册</h1>
		</template>
		<script type="text/javascript">
			//创建路由对象: 路由规则{连接A--->资源A,连接B--->资源B....}
			var myrouter = new VueRouter({
				//设置路由匹配规则: routes
				routes:[
					{path:"/login",component:{template:"#logintp"},
					//设置该路由独享守卫
						beforeEnter:function(to,from,next){//进入当前路由资源之前执行
							console.log("beforeEnter 来自："+from.path);//来自哪里
							console.log("beforeEnter 去哪："+to.path);//去往哪里
							next();//释放链接next({path:...})
						}
					},
					{path:"/zhuce",component:{template:"#zhucetp"}}
				]
			});
			var vm = new Vue({
				el:"#app",
				router:myrouter //将路由对象挂载到Vue对象中
			});
		</script>
	</body>
</html>

结果
点击注册会发现没有触发该守卫
在这里插入图片描述
在点击login发现守卫已触发，因为这是在login路由内部设置的守卫。
在这里插入图片描述
组件内的守卫
在这里插入图片描述

示例

<html>
	<head>
		<meta charset="UTF-8">
		<title>组件内导航守卫 </title>
		<!--导入Vue及路由-->
		<script type="text/javascript" src="js/vue-2.4.0.js" ></script>
		<script type="text/javascript" src="js/vue-router-3.0.1.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--编写路由链接: 类似a标签,作为1个跳转热点内容-->
			<router-link to="/login">login</router-link>
			<router-link to="/login2/1">login2</router-link>
			<router-link to="/login2/2">login2</router-link>
			<router-link to="/zhuce">zhuce</router-link>
			<!--创建路由出口: 专门用于展示路由资源的位置-->
			<router-view></router-view>
		</div>
		
		<!--模板-->
		<template id="logintp">
			<h1>登录</h1>
		</template>
		<template id="zhucetp">
			<h1>注册</h1>
		</template>
		<script type="text/javascript">
			var logincom={
				template:"#logintp",
				//在渲染的组件的对应路由之前被调用
				beforeRouteEnter(to,from,next){
					console.log("beforeRouteEnter 来自:"+from.path);
					console.log("beforeRouteEnter 去哪:"+to.path);
					next();//释放链接next({path:...})
				},
				//当前路由改变 ，但该组件被复用时调用
				beforeRouteUpdate(to,from,next){
					console.log("beforeRouteUpdate 来自:"+from.path);
					console.log("beforeRouteUpdate 去哪:"+to.path);
					next();//释放链接next({path:...})
				},
				//导航离开该组件的对应路由时被调用
				beforeRouteLeave(to,from,next){
					console.log("beforeRouteLeave 来自:"+from.path);
					console.log("beforeRouteLeave 去哪:"+to.path);
					next();//释放链接next({path:...})
				}
			}
			//创建路由对象: 路由规则{连接A--->资源A,连接B--->资源B....}
			var myrouter = new VueRouter({
				//设置路由匹配规则: routes
				routes:[
					{path:"/login",component:logincom},
					{path:"/login2/:id",component:logincom},
					{path:"/zhuce",component:{template:"#zhucetp"}}
				]
			});
			var vm = new Vue({
				el:"#app",
				router:myrouter //将路由对象挂载到Vue对象中
			});
		</script>
	</body>
</html>

结果
点击login在点击第一个login2会发现beforeRouteUpdate没有触发
在这里插入图片描述
在点击第二个login2 会发现beforeRouteUpdate已经触发
在这里插入图片描述
在点击第一个login2会发现也会触发beforeRouteUpdate
在这里插入图片描述

yananye
关注
vue-router.js 3.0.1 版本
04-17
vue-router 3.0.1 版本 , 2018-04-05 最新版本 .
vue框架vue-next-admin-master.zip
04-04
4. **Vue Router**：Vue Router 是官方的路由管理器，用于管理应用的路由，实现页面间的跳转和导航。在后台管理系统中，路由配置尤为重要，它定义了不同页面的访问路径。 5. **Axios**：通常 Vue 项目会使用 Axios ...
Vue
Mir_nie的博客
09-19 1074
前端框架发展历史 html [1990]----> html5 [2008.1.12] css 1.0 发布于1996年 css 2.0 发布于1998年 css 3.0 发布于2001年 EcmaScript 1997年诞生 2015 EcmaScript 2015 2016 EcmaScript 2016 vue 1.0 MVVM 2014/07 Vue 2.0 MVVM ...
深入学习Vue丨第三篇】Vue 组件基础
最新发布
weixin_59796310的博客
11-07 343
深入学习Vue丨第三篇】Vue 组件基础
基于vue-admin-template 修改后的通用动态权限路由模板
11-20
【Vue-Admin-Template修改后的通用动态权限路由模板】是一个针对后台管理系统的优化方案，它基于流行的前端框架Vue.js，并且特别关注权限管理和动态路由。这个模板的核心特性是能够根据用户的权限动态生成路由表，...
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue-router-nav-呈现vue-router路由的简约响应式导航栏。-Vue.js开发
05-27
vue-router-nav呈现vue-router路由的简约响应式导航栏。 观看演示。 依赖关系您需要拥有vue-router insta vue-router-nav简约的响应式导航栏，用于呈现vue-router的路由。 观看演示。 依赖关系您需要安装vue-router...
vue-page-stack：Vue SPA的路由和导航。 Vue单页应用导航管理器
02-06
Vue页面堆栈 English | Vue SPA导航管理器将UI像本地应用程序一样缓存在SPA中，而不是销毁它。 例 产品特点 :dragon: 在vue-router上扩展后，原始导航逻辑保持不变 :soccer_ball: 当页面通过push或forward重新...
安装Vue 及 创建一个Vue 项目
weixin_33858485的博客
01-31 196
创建一个Vue项目 首先要先安装node 及 npm 详情见 【http://www.cnblogs.com/ylboke/p/8342116.html 】及 【http://www.cnblogs.com/ylboke/p/8342185.html 】 安装Git（Git是一个分布式版本控制系统）详情见（关于git使用 在之后会记录） 【http://www.cnblogs.com/w...
vue入门
今晚几点睡的博客
09-14 373
vue入门1. Vue.js是什么？2.库和框架的区别3. MVVM的介绍4. 安装Vue5. 第一个Vue实例：“Hello Vue!”demo1.html6. Vue实例demo1.1.html7. 双向数据绑定(Vue two way data binding)demo1.2.html8. 实例生命周期钩子(了解即可)demo1.3.html9. Vue核心指令10. 什么是BootCDN ...
vue
神zhi殇的博客
09-24 1019
补充：环境安装和代码下载： http://nodejs.org下载node 下载好安装包后，打开终端： 搜索：terminal.app 或者终端 terminal中：clear：清屏 node -v 查看版本号 --version 安装包：傻瓜式安装 node -v 版本更新了 终端：history：查看以往的命令 mac中右键可以整理项目，让各个文件夹对齐 代码地址：https://git...
Vue.js 学习笔记 一
aisijue2425的博客
04-05 305
本文的Demo和源代码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！ https://github.com/zwl-jasmine95/Vue_test 以下所有知识都是基于vue.js 2.0版本 一、简介 Vue.js（读音 /vjuː/，类似于view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，V...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值