Vue中的router路由

目录

一，vue-router路由

二，vue-router路由常用配置

三，vue-router路由嵌套

四，vue-router路由参数传递与获取

五，使用props替代路由对象获取参数

六，路由的动态跳转

七，路由&过渡

---

一，vue-router路由

vue-router路由：Vue.js官网推出的路由管理器，方便的构建单页应用；

单页应用：Single Page Application简称SPA，只有一个web页面的应用，用户与应用交互时，动态更新该页面的内容；

                  简单的来说，根据不同的url与数据，将他们都显示在同一个页面中，就可以称为是单页应用；

                  而控制页面跳转需要用路由；

vue-router官网：点击前往

vue-router下载：下载js，或使用npm install vue-router -S；

vue-router使用：

1. 定义组件；
2. 配置路由；
3. 创建路由对象；
4. 注入路由；

	
		
		
	
	
		

			首页
			美食
			
			

				
				
			
		
	
	
	
	
	

 

二，vue-router路由常用配置

mode：配置路由模式，默认为hash，URL很丑，可以修改为history，但是需要服务端的支持；

redirect：重定向，可以设置默认页面；

linkActiveClass：设置router-link激活样式；

	
		
		
		
		
	
	
		

			首页
			美食
			
			

				
				
			
		
	
	
	
	
	
	

 

三，vue-router路由嵌套

路由的嵌套：一个路由中嵌套（包含）其他的路由；

在路由的配置中，使用children可以配置子路由，children也可以配置多个，与routes一致；

	
		
		
		
		
	
	
		

			首页
			美食
			
			

				
				
			
		
	
	
	
	
	
	
	
	
	

 

四，vue-router路由参数传递与获取

使用路由对象$route获取参数：

  1.params：

         a.参数传递：

                 a)URL传参：例 linke to : "/foods/bjc/北京烤鸭/68">   注：在对应路由path上使用 /:+属性名称接收参数

                 b)对象传参：例 linke :to : "xxObj"> 注：对象格式{String name, Objce param} name是路由名称，param是传                                          递参数的对象

         b. 参数获取：使用$route.params获取参数；

   2.query：

         a.参数传递：

                a)URL传参：例 linke to : "/foods/bjc?name=北京烤鸭&price=68">

                b)对象传参：例 linke :to : "xxObj"> 注：对象格式{String path, Objce query} path是路由url，query是传递参数                                          的对象

        b.参数获取：使用$route.query获取参数；

	
		
		
		
	
	
		

			首页
			美食
			
			

				
				
			
		
	
	
	
	
	
	
	
	

 

五，使用props替代路由对象获取参数

使用路由对象$route获取参数时，组件和路由对象耦合，这里可以使用props来进行解耦；

1，在组件中使用props选项定义数据，接受参数；

2，在路由中，使用props选项来进行设置，路由中的props有三种模式：

• 布尔模式：props设置为true，可接受params方式的参数传递；
• 函数模式：props为函数，可接受query方式的参数传递；
• 对象模式：props为对象。如果处理静态数据，可使用对象模式

	
		
		
		
		
	
	
		

			首页
			美食
			
			

				
				
			
		
	
	
	
	
	
	
	
	

 

六，路由的动态跳转

利用vue-router实例方法，使用js对路由进行动态跳转；

1. router.push：参数为路由对象，跳转到指定路由，跳转后会产生历史记录；
2. router.replace：参数为路由对象，跳转到指定路由，跳转后不产生历史记录；
3. router.go：参数为number，number为正向前跳转，为负向后跳转，根据number的值跳转到对应页面，前提是必须有历史记录可供跳转；
4. router.back：无参，后退一个页面，需要有历史记录；
5. router.forward：无参，前进一个页面，需要有历史记录；

	
		
		
		
		
	
	
		

			首页
			美食
			
			

				
				
			
			
			
			

				push 返回首页

				replace 前往美食广场

				go(-1)

				go(2)

				back 返回1步

				forward 前进1步

			
		
	
	
	
	
	
	
	
	

七，路由&过渡

路由可以结合过渡效果使用；

使用将包裹住，再写样式即可。

	
		
		
		
		
		
	
	
		

			首页
			美食