vue路由学习

  • A+
所属分类:Web前端
摘要

​ 路由的本质就是一种对应关系,在代码程序中,一个a标签跳转页面,里面a标签里面需要写对用页面的路径,或者写跳转后台的服务。那么这个路径就与页面相对应,我们可以将它视为路由的一种形式。


一.文章导读

​ 路由的本质就是一种对应关系,在代码程序中,一个a标签跳转页面,里面a标签里面需要写对用页面的路径,或者写跳转后台的服务。那么这个路径就与页面相对应,我们可以将它视为路由的一种形式。

路由分为前端路由和后端路由

  • 后端路由是由服务器端进行实现,并完成资源的分发
  • 前端路由是依靠hash值(锚链接)的变化进行实现

下面学习vue的路由管理器:Vue Router

二.路由入门实例

1. 选项卡案例

<body> 		<div id="app"> 			<!-- 定义table选项卡头 #号代表锚点必须 --> 			<a href="#/tab1">tab1</a> 			<a href="#/tab2">tab2</a> 			<a href="#/tab3">tab3</a> 			<a href="#/tab4">tab4</a> 			<!-- 定义内容 --> 			<div class="tablebody"> 				<!-- 根据 tablename的值变换而变换显示组件 --> 				<component :is="tablename"></component> 			</div> 		</div> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			/*  				定义四个组件模板,与a标签一一对应 			 */ 			const tab1 = { 				template: '<strong>table01</strong>' 			} 			const tab2 = { 				template: '<strong>table02</strong>' 			} 			const tab3 = { 				template: '<strong>table03</strong>' 			} 			const tab4 = { 				template: '<strong>table04</strong>' 			}  			const vm = new Vue({ 				el: "#app", 				data: { 					tablename: "tab1" 				}, 				// 注册 私有组件 				components: { 					tab1, 					tab2, 					tab3, 					tab4 				} 			}); 			//window.onhashchange  获取最新的hash值并将hash值截取将该值赋值给实例的 tablename 			window.onhashchange = function() { 				// location.hash 获取当前最新的hash值 				console.log(location.hash); 				// 截取hash值赋值给 tablename  				vm.tablename = location.hash.slice(2); 				/* switch(location.hash.slice(1)){ 				            case '/tab1': 				                vm.tablename = 'tab1' 				            break 				            case '/tab2': 				                vm.tablename = 'tab2' 				            break 				            case '/tab3': 				                vm.tablename = 'tab3' 				            break 				            case '/tab4': 				                vm.tablename = 'tab4' 				            break 				            } */ 			} 		</script> 		<!-- // 加点样式 --> 		<style type="text/css"> 			#app { 				width: 500px; 				height: 300px; 				border: 1px solid black; 			} 		 			#app a { 				display: inline-block; 				width: 100px; 				padding: 10px; 			} 		 			.tablebody { 				margin-top: 20px; 				text-align: center; 				background-color: aliceblue; 				height: 240px; 			} 		</style> 	</body> 

三.Vue Router使用

1.Router简介

它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器,推荐使用。
Vue Router和Vue.js非常契合,可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue,所以需要先引入Vue,再引入Vue Router

Vue Router的特性:
支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为

2.Vue Router使用

<html> 	<head> 		<meta charset="utf-8"> 		<title>vueRouter使用</title> 		<!-- // 第一步导入vue-router_3.0.2.js vue-router依赖于vue.js 在后面导入 --> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> 	</head> 	<body> 		<div id="app"> 			<!-- 第二步 将上面的代码copy一下--> 			<div id="app"> 				<!-- 					将原先的a标签修改为 <router-link> 标签  					router-link相当于a标签中的a to相当于href 				--> 				<router-link to="/tab1">tab1</router-link> 				<router-link to="/tab2">tab2</router-link> 				<router-link to="/tab3">tab3</router-link> 				<router-link to="/tab4">tab4</router-link> 				<!-- 定义内容 --> 				<div class="tablebody"> 					<!-- 3. 添加路由占位符,存放组件 --> 					<router-view></router-view> 					<!-- <component :is="tablename"></component> --> 				</div> 			</div> 		</div> 		<script type="text/javascript"> 			/* 				定义四个组件模板,与a标签一一对应 			 */ 			const tab1 = { 				template: '<strong>table01</strong>' 			} 			const tab2 = { 				template: '<strong>table02</strong>' 			} 			const tab3 = { 				template: '<strong>table03</strong>' 			} 			const tab4 = { 				template: '<strong>table04</strong>' 			} 			/*  				创建路由 并绑定定义的组件模板 			 */ 			var myRouter = new VueRouter({ 			    //routes是路由规则数组 			    routes:[ 			        //每一个路由规则都是一个对象,对象中至少包含path和component两个属性 			        //path表示  路由匹配的hash地址,component表示路由规则对应要展示的组件对象 			         					{path:"/tab1",component:tab1}, 			        {path:"/tab2",component:tab2}, 					{path:"/tab3",component:tab3}, 					{path:"/tab4",component:tab4}, 			    ] 			}); 			new Vue({ 				el:"#app", 				// 在实例中挂载路由对象 			    router:myRouter 			}) 			 		</script> 		<style type="text/css"> 			#app { 				width: 500px; 				height: 300px; 				border: 1px solid black; 			} 		 			#app router-link { 				width: 100px; 				padding: 10px; 			} 		 			.tablebody { 				margin-top: 20px; 				text-align: center; 				background-color: aliceblue; 				height: 240px; 			} 		</style> 	</body> </html> 

注意:导入的vue-router_3.0.2.js 依赖于vue.js,且必须在创建路由之前导入

3.嵌套路由

​ 在前面组件学习中,我们间接的了解到了父组件和子组件的概念,那么在一个路由实例中存在这另一个子路由,我们将他们称之为嵌套路由

<html> 	<head> 		<meta charset="utf-8"> 		<title>嵌套路由</title> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> 	</head> 	<body> 		<div id="app"> 			<router-link to="/user">user</router-link> 			<router-link to="/login">login</router-link>  			<router-view></router-view> 		</div> 		<script type="text/javascript"> 			// 创建 user 模板 			const User = { 				template: ` 					<div> 						this is user 					</div> 				` 			}; 			// 定义login 父模板模板 login模板中写了定义了两个子路由 			const Login = { 				template: ` 					<div> 						<h1>this is Login</h1> 						<hr> 						<router-link to="/login/pwd">账号密码登录</router-link> 						<router-link to="/login/phone">扫码登录</router-link> 						<router-view></router-view> 					</div> 				` 			}; 			// 定义账号登录子路由组件 			const account = { 				template: ` 					<div> 						账号:<input type="text"><br> 						密码:<input type="text"> 					</div> 				` 			} 			// 定义扫码子路由组件 			const phone = { 				template: ` 					<div> 						<img src = "img/2.jpg" alt="vue路由学习" width = "50px"> 					</div> 				` 			} 			// 创建路由对象 			const myRouter = new VueRouter({ 				routes: [{ 						path: "/", 						redirect: "/user" 					}, 					{ 						path: "/user", 						component: User 					}, 					{ 						path: "/login", 						component: Login, 						// 定义子路由 						children: [{ 								path: "/login/pwd", 								component: account 							}, 							{ 								path: "/login/phone", 								component: phone 							}, 						] 					}, 				] 			})  			new Vue({ 				el: "#app", 				// 挂载路由 				router: myRouter 			}) 		</script> 	</body> </html> 

4.动态路由

<body> 		<div id="app"> 			<!-- 定义四个 router-link 标签 --> 			<router-link to="/user/1">点击1</router-link> 			<router-link to="/user/2">点击2</router-link> 			<router-link to="/user/3">点击3</router-link> 			<router-link to="/user/4">点击4</router-link> 			<router-view></router-view> 		</div>  		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			var User = { 				template: "<div>用户:{{$route.params.id}}</div>" 			} 			// 创建路由对象 			const myRouter = new VueRouter({ 				routes: [ 					// {path:"/",redirect:"/user"}, 					{ 						// 在路径上带一个id相当于带一个值达到动态路由的效果 						path: "/user/:id", 						component: User 					} 				] 			}); 			new Vue({ 				el: "#app", 				router: myRouter 			}) 		</script> 	</body> 

​ 上面的代码我们直接使用 $route.params.id 获取路由中传的参数值,除此之外,我们还可以通过props传值

<body> 		<div id="app"> 		<!-- 定义四个 router-link 标签 --> 			<router-link to="/user/1">点击1</router-link> 			<router-link to="/user/2">点击2</router-link> 			<router-link to="/user/3">点击3</router-link> 			<router-link to="/user/4">点击4</router-link> 			<router-view></router-view> 		</div>  		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			// 上面的代码我们直接使用 $route.params.id 获取路由传的值,除此之外,我们还可以通过props传值  			var User = { 				props: ["id"], 				// 使用props传值,在页面中使用{{}}就可以 				template: "<div>用户:{{id}}</div>" 			} 			// 创建路由实例 制定路由规则 			var myRouter = new VueRouter({ 				routes:[ 					// props:true 启用 props 					{path:"/user/:id",component:User,props:true} 				] 			}) 			new Vue({ 				el: "#app", 				data:{ 					id:1 				}, 				//在app实例中挂载路由 				router:myRouter 			}) 		</script> 	</body> 

5.路由别名

<body> 		<div id="app"> 			<!-- 在前台使用v-bind绑定 路由绑定使用别名name:'user' --> 			<router-link :to="{ name:'user' , params: {id:111} }">111</router-link> 			<router-link :to="{ name:'user' , params: {id:222} }">222</router-link> 			<router-link :to="{ name:'user' , params: {id:333} }">333</router-link> 			<router-view></router-view> 		</div> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			 var User = { 				 props:["id"], 				 template:"<div>用户: {{id}}</div>" 			 } 			  			 var myRouter = new VueRouter({ 				routes:[ 					{ 						// name 为取的别名 						path:"/user/:id",component:User,name:"user",props:true 					} 				]  			}); 			new Vue({ 				el:"#app", 				// 路由挂载 				router:myRouter 			}) 		</script> 	</body> 

6.编程式导航

页面导航的两种方式:

  • 声明式导航:通过点击链接的方式实现的导航
  • 编程式导航:调用js的api方法实现导航
this.$router.push("hash地址"); this.$router.push("/login"); this.$router.push({ name:'user' , params: {id:123} }); this.$router.push({ path:"/login" }); this.$router.push({ path:"/login",query:{username:"jack"} });  this.$router.go( n );//n为数字,参考history.go this.$router.go( -1 ); 

dmeo演示

<body> 		<div id="app"> 			<router-link :to="{ name:'user' , params: {id:1} }">user1</router-link> 			<router-view></router-view> 		</div> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 		 	var User = { 				props:["id"], 				template: ` 				   <div>用户:{{id}}<br> 						<span @click="test01">编程试导航测试1</span> 						<span @click="test02">编程试导航测试2</span> 				   </div> 				`, 				methods:{ 					// 采用js编程式导航 					test01:function(){ 						this.$router.push("/test01"); 					}, 					test02:function(){ 						this.$router.push("/test02"); 					} 				} 				 			} 			//  			var Test01 = { 				template:` 					<span>测试01</span> 				` 			} 			var Test02 = { 				template:` 					<span>测试02</span> 				` 			} 			 			// 创建路由 并制定规则 			var myRouter =  new VueRouter({ 				routes:[ 					{ 						path:"/user",component:User,name:'user',props:true 					}, 					{ 						path:"/test01",component:Test01,name:'test01',props:true 					}, 					{ 						path:"/test02",component:Test02,name:'test02',props:true 					} 				] 			}); 			new Vue({ 				el:"#app", 				router:myRouter 			}) 		</script> 	</body> 

gitee地址https://gitee.com/li_shang_shan/vue-routing-learning