vue路由學習

一.文章導讀

路由的本質就是一種對應關係，在代碼程序中，一個a標籤跳轉頁面，裏面a標籤裏面須要寫對用頁面的路徑，或者寫跳轉後臺的服務。那麼這個路徑就與頁面相對應，咱們能夠將它視爲路由的一種形式。

路由分爲前端路由和後端路由

• 後端路由是由服務器端進行實現，並完成資源的分發
• 前端路由是依靠hash值(錨連接)的變化進行實現

下面學習vue的路由管理器：Vue Router

二.路由入門實例

1. 選項卡案例

		
						tab1
			tab2
			tab3
			tab4
						
								
			
		
		
		table01'
			}
			const tab2 = {
				template: 'table02'
			}
			const tab3 = {
				template: 'table03'
			}
			const tab4 = {
				template: 'table04'
			}

			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
				            } */
			}		" _ue_custom_node_="true">
				
	

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

	
		
		vueRouter使用
				
		
	
	
		
						
				標籤 
					router-link至關於a標籤中的a to至關於href
				-->				tab1
				tab2
				tab3
				tab4
								
										
					-->				
			
		
		table01'
			}
			const tab2 = {
				template: 'table02'
			}
			const tab3 = {
				template: 'table03'
			}
			const tab4 = {
				template: 'table04'
			}
			/* 
				建立路由 並綁定定義的組件模板
			 */
			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
			})			
		" _ue_custom_node_="true">
		
	

注意:導入的vue-router_3.0.2.js 依賴於vue.js,且必須在建立路由以前導入

3.嵌套路由

在前面組件學習中，咱們間接的瞭解到了父組件和子組件的概念，那麼在一個路由實例中存在這另外一個子路由，咱們將他們稱之爲嵌套路由

	
		
		嵌套路由
		
		
	
	
		
			user
			login

			
		
		
						this is user					
				`
			};
			// 定義login 父模板模板 login模板中寫了定義了兩個子路由
			const Login = {
				template: `					
						this is Login
						
						帳號密碼登陸
						掃碼登陸
						
					
				`
			};
			// 定義帳號登陸子路由組件
			const account = {
				template: `					
						帳號：
						密碼：
					
				`
			}
			// 定義掃碼子路由組件
			const phone = {
				template: `					
						
					
				`
			}
			// 建立路由對象
			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
			})		" _ue_custom_node_="true">
	

4.動態路由

		
						點擊1
			點擊2
			點擊3
			點擊4
			
		

		
		
		用戶:{{$route.params.id}}"
			}
			// 建立路由對象
			const myRouter = new VueRouter({
				routes: [
					// {path:"/",redirect:"/user"},
					{
						// 在路徑上帶一個id至關於帶一個值達到動態路由的效果
						path: "/user/:id",
						component: User
					}
				]
			});
			new Vue({
				el: "#app",
				router: myRouter
			})		" _ue_custom_node_="true">
	

上面的代碼咱們直接使用 $route.params.id 獲取路由中傳的參數值，除此以外，咱們還能夠經過props傳值

		
					點擊1
			點擊2
			點擊3
			點擊4
			
		

		
		
		用戶：{{id}}"
			}
			// 建立路由實例 制定路由規則
			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
			})		" _ue_custom_node_="true">
	

5.路由別名

		
						111
			222
			333
			
		
		
		
		用戶: {{id}}"
			 }
			 
			 var myRouter = new VueRouter({
				routes:[
					{
						// name 爲取的別名
						path:"/user/:id",component:User,name:"user",props:true
					}
				] 
			});
			new Vue({
				el:"#app",
				// 路由掛載
				router:myRouter
			})		" _ue_custom_node_="true">
	

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
			
		
		
		
		用戶:{{id}}
						編程試導航測試1
						編程試導航測試2
				   
				`,
				methods:{
					// 採用js編程式導航
					test01:function(){
						this.$router.push("/test01");
					},
					test02:function(){
						this.$router.push("/test02");
					}
				}
				
			}
			// 
			var Test01 = {
				template:`					測試01
				`
			}
			var Test02 = {
				template:`					測試02
				`
			}
			
			// 建立路由 並制定規則
			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
			})		" _ue_custom_node_="true">