Vue--路由

最新推荐文章于 2024-09-23 23:21:14 发布
最新推荐文章于 2024-09-23 23:21:14 发布
阅读量228 收藏 1
点赞数 1
文章标签： vue javascript js vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yananye/article/details/119641990
版权
本文详细介绍了Vue项目的路由应用，包括前端路由的概念、配置与使用，如一级和二级路由的设定，路由参数传递，以及编程式路由的方法。同时，深入探讨了导航守卫，包括全局守卫、路由独享守卫和组件内的守卫，通过实例展示了导航守卫的工作流程和应用场景。
摘要由CSDN通过智能技术生成

路由

简介
路由在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
weixin_52972575的博客
06-26 330
目录1.使用Vue2.Vue基本语法3.逐个突破 1.data的应用 2.methods的应用 3.vue组件 4.mounted()的使用 双向绑定axios
vue框架vue-next-admin-master.zip
04-04
4. **Vue Router**：Vue Router 是官方的路由管理器，用于管理应用的路由，实现页面间的跳转和导航。在后台管理系统中，路由配置尤为重要，它定义了不同页面的访问路径。 5. **Axios**：通常 Vue 项目会使用 Axios ...
vue-router.js 3.0.1 版本
04-17
vue-router 3.0.1 版本 , 2018-04-05 最新版本 .
vue入门
最新发布
weixin_42795092的博客
09-23 1418
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。
安装Vue 及 创建一个Vue 项目
weixin_33858485的博客
01-31 135
创建一个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-admin-template 修改后的通用动态权限路由模板
11-20
【Vue-Admin-Template修改后的通用动态权限路由模板】是一个针对后台管理系统的优化方案，它基于流行的前端框架Vue.js，并且特别关注权限管理和动态路由。这个模板的核心特性是能够根据用户的权限动态生成路由表，...
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-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
基于vue-router 多级路由redirect 重定向的问题
10-18
Vue-router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。在实际项目中，路由的配置和重定向操作非常常见，尤其是在处理多级路由时，可能会遇到一些问题。本文将详细介绍在使用 vue-router 实现多级路由...
vue
ZhangJiawen的博客
05-07 129
文章目录一、vue 概述二、第一个Vue程序三、Vue 基本语法1. 指令2. 条件渲染—— if 判断3. 列表渲染—— for 循环四、Vue 绑定事件五、Vue 双向绑定1. 什么是数据双向绑定？2. 为什么要实现数据的双向绑定？3. 例子六、Vue 组件详解1. 组件基础2. 例子：七、Axios异步通信1. Axios是什么？2. Axios 功能特点3. vue 生命周期4. 应用八、计算属性1. 概念2. 例子九、插槽十、自定义事件内容分发十一、webpack 学习使用 一、vue 概述
Vue.js 学习笔记 一
aisijue2425的博客
04-05 228
本文的Demo和源代码已放到GitHub，如果您觉得本篇内容不错，请点个赞，或在GitHub上加个星星！ https://github.com/zwl-jasmine95/Vue_test 以下所有知识都是基于vue.js 2.0版本 一、简介 Vue.js（读音 /vjuː/，类似于view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，V...
Vue-router动态路由详解与实战应用
本文主要讲解了Vue Router中的动态路由概念以及其实际应用。动态路由在Vue Router中是一种灵活的路由方式，特别适用于那些页面结构相似但内容因数据变化而异的场景，如商品详情页，通过不同的商品ID来动态渲染不同的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值