Vue-router路由

1.首先需要先引入vue-router，使用npm直接安裝即可
下面是使用方法：

			let componentA={
				template:'#Home',
				data(){
					return {
						msg:'主頁',
						arr:['javaScript','Html','Css','jquery']
					}
				}
			}
			let componentB={
				template:'#New',
				data(){
					return {
						msg:'新聞頁',
						arr:['張三愛打籃球','李四愛旅遊','王五不喜歡跑步','丁卯爆出與女友同居3年']
					}
				}
			}
			/*配置路由*/
			let routes=[
				{path:'/Home',component:componentA},
				{path:'/New',component:componentB},
				{path:'/*',redirect:'/Home'}    //重定向
			];
			let router=new VueRouter({
				routes,      //es6新寫法    如果屬性名與屬性值的名字相同則可以省略
				linkActiveClass:'active'//設定點選高亮顯示   active為類名
			})
			/*vue例項*/
			let vm=new Vue({
				el:'#app',
				router,   //整個vue例項內使用router
				data:{
					msg:'路由和$set $delete例項方法'
				},
				methods:{
					
				},
				components:{
					'home':componentA,
					'new':componentB
				}
			})
 

接下來只需要在HTML中使用:

			<router-link to="/Home">首頁</router-link>
			<router-link to="/New">新聞頁</router-link>

作為跳板，router-link標籤就相當於a標籤 to屬性就相當與a標籤內的href屬性。使用router-view 標籤作為跳轉之後顯示的區域。

<router-view></router-view>

2.路由傳參：

• 靜態傳參：

<router-link to="/Home?name=張三&age=18">首頁</router-link>
/*元件中*/
<p>{{$route.query}}</p>//獲取通過路由傳到元件內資料
 

• 動態傳參：

<router-link :to="'/New/'+info">新聞頁</router-link>
//路由中也需要相應的配置：
{path:'/New/:info',component:componentB},    //info為父元件內的data
//獲取資料：
<p>{{$route.params}}</p>


//獲取資料方式2：
//在路由中配置props屬性為true則元件中可以直接訪問傳入的動態引數
{path:'/New/:info',component:componentB,props:true}

//子元件中，可以像父子傳值一樣定義props值進行接收
export default{
props:['info']
}
<template>
	<div>
		<p>{{info}}</p>
	</div>
</template>
  寫法2：
  {
        path:'/list/:id',
        name:'list',
        component:List,
        props : (route)=>({
            query:route.query.q    //靜態傳參值
            id:route.params.id    //動態傳參值
        })
    }
export default{
props:['query','id']
}
<template>
	<div>
		<p>{{query}}    {{id}}</p>
	</div>
</template>
 

動態路由一般可以用於實現分頁效果，程式碼如下：

/*顯示資訊的元件*/
mounted(){    //生命週期，此時已經初始化了el ,並完成了渲染
  if(this.$route.params.id==1){

		//傳送請求獲得頁面1的資訊
}
if(this.$route.params.id==2){

		//傳送請求獲得頁面2的資訊
}
	
}

3.路由中的方法：

1. push方法：程式設計式導航,相當於router-link 標籤的作用定義導航，並且會跳轉到該路徑，該方法會在history棧內新增一條記錄，所以使用者點選後退可以回到原來的路徑頁面。

可以在Header元件中跳轉到list中

export defalut{
    methods:{
        handleClick(){
            this.$router.push({
                name:'list'
                
            })
        }
    }
}
可以在Header元件中跳轉到list/123中

export defalut{
    methods:{
        handleClick(){
            this.$router.push({
                //一種方式
                //path:'/list/123',
                
                
                //2種方式
                name:'list'
                params:{
                    id:123
                }
            })
        }
    }
}
使用router.push 或者 router.replace 裡面都不能讓path和params同時存在

若要跳轉到接收了指定引數的路徑頁面時，則在路由中新增name屬性，name屬性一般與path同名，利用name 和params屬性配合。(因為path和params不能同時存在)；

引數可以是以下幾種：

1. router.push(‘home’); 字串 home為path名 一般是跳轉到子路由
2. router.push({path:’/home’}); 物件
3. router.push({name:‘home’,params:{…}}); 根據路由的name屬性進行跳轉，同時傳入動態引數(傳入動態引數只能這麼傳)
4. router.push({path:’/home’,query:{…}}); 帶查詢引數的物件(就是跳轉的時候同時傳入靜態引數)

router.replace()與push的區別是，replace不會向history棧內新增記錄，而是替換，所以不能退後。

4.路由導航鉤子函式：
正如其名，vue-router 提供的導航鉤子主要用來攔截導航，讓它完成跳轉或取消。有多種方式可以在路由導航發生時執行鉤子：全域性的, 單個路由獨享的, 或者元件級的。

可以使用 beforeEach 來定義一個全域性before鉤子：

const router = new VueRouter({ ... })
 
router.beforeEach((to, from, next) => {
  // ...
})

同理也可以使用afterEach定義一個全域性after鉤子，但是after鉤子沒有next方法，不能改變導航。

每個鉤子方法接收三個引數：
to: Route : 即將要進入的目標 [路由物件]
from: Route : 當前導航正要離開的路由
next: Function : 一定要呼叫該方法來 resolve 這個鉤子。執行效果依賴 next
方法的呼叫引數。
next(): 進行管道中的下一個鉤子。如果全部鉤子執行完了，則導航的狀態就是confirmed （確認的）。
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是使用者手動或者瀏覽器後退按鈕），那麼 URL 地址會重置到 from
路由對應的地址。
next(’/’) 或者 next({ path: ‘/’ }): 跳轉到一個不同的地址。當前的導航被中斷，然後進行一個新的導航。

某個路由的獨享鉤子：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
//to  from  next  引數與全域性的一樣

元件內的導航鉤子：
最後，你可以在路由元件內直接定義以下路由導航鉤子：

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該元件的對應路由被 confirm 前呼叫
    // 不！能！獲取元件例項 `this`
    // 因為當鉤子執行前，元件例項還沒被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫
    // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。就是渲染同一個元件，但是引數卻改變了，此時呼叫該方法。
    // 可以訪問元件例項 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時呼叫
    // 可以訪問元件例項 `this`
  }
}

注意：beforeRouteEnter方法內不能訪問例項this，因為這個方法是在導航確認前，執行。而此時對應的元件並沒有被建立。

不過，你可以通過傳一個回撥給 next來訪問元件例項。在導航被確認的時候執行回撥，並且把元件例項作為回撥方法的引數。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通過 `vm` 訪問元件例項
  })
}

你可以 在 beforeRouteLeave 中直接訪問 this。這個 leave 鉤子通常用來禁止使用者在還未儲存修改前突然離開。可以通過 next(false) 來取消導航。

路由的巢狀：

			let routes=[
				{path:'/Home',name:'Home',component:componentA,
				children:[
					{path:'first',component:componentAa},
					{path:'last',component:componentAb}
				]},  //子路由
				{path:'/New/:info',name:'New',component:componentB,props:true},
				{path:'/*',redirect:'/Home'}    //重定向
			];