vue路由学习

一.文章导读

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

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

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

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

二.路由入门实例

1. 选项卡案例

		

			
			tab1
			tab2
			tab3
			tab4
			
			

				
				
			
		
		
		
		
		
	

三.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使用

	
		
		
		
		
		
	
	
		

			
			

				
				tab1
				tab2
				tab3
				tab4
				
				

					
					
					
				
			
		
		
		
	

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

3.嵌套路由

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

	
		
		
		
		
	
	
		

			user
			login

			
		
		
	

4.动态路由

		

			
			点击1
			点击2
			点击3
			点击4
			
		

		
		
		
	

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

		

		
			点击1
			点击2
			点击3
			点击4
			
		

		
		
		
	

5.路由别名

		

			
			111
			222
			333
			
		
		
		
		
	

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演示

		

			user1
			
		
		
		
		
	

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