Vue Router 路由的安裝和使用

路由（Router）的安裝

在項目的根目錄中輸入下面的命令安裝Router路由，會讓我們選擇模式，我們輸入n選擇哈希模式即可。

vue add router

在項目中生成router和views文件夾時代表安裝成功，router文件夾下的index.js是用於配置路由，views文件夾上存放的是頁面組件。

配置路由

在vue創建的默認項目中，已經爲我們配置了默認的home和about組件，我們新建一個組件Index.vue來進行配置。

<template>
    <div>
        <h1>this is my create pages</h1>
    </div>
</template>

我們在routes中配置index.vue的組件

const routes = [{
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: () => import ('../views/About.vue')
    },
    {
        path: '/index',
        name: 'index',
        component: () => import ('../views/Index.vue')
    }
]

使用 () => import('xxx.vue') 路由懶加載可以更加高效。

引用組件

在我們的App.vue主頁面中，我們通過<router-link></router-link>標籤來進行引用組件

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> | 
      <router-link tag="span" to="/index">Index</router-link>
    </div>
    <router-view/>
  </div>
</template>

我們可以使用tag屬性渲染成指定的標籤，to 控制的是跳轉的組件，我們還可以使用name和path來綁定，值爲./router/index.js中路由配置的name和path參數。

<router-link :to="{name: 'About'}">About</router-link>
<router-link :to="{path: '/index'}">Index</router-link>

動態路由

動態路由就是可以變化的參數，比如下面的id，並且這個頁面的跳轉需要用name來跳轉，因爲path是動態的。

<router-link :to="{name: 'about',params:{id:1}}">About</router-link>

{
    path: '/about/:id',
    name: 'about',
    component: () => import ('../views/About.vue')
}

  mounted(){
    console.log(this.$route.params.id);
  }

在實例被掛載後調用後可以獲取路由傳遞過來的值。

歷史模式

我們在點擊組件的時候我們發現地址欄的地址存在符號 #，如果不想要這個符號，我們可以將路由配置爲歷史模式。

const router = new VueRouter({
    mode: "history", // 配置爲歷史模式
    routes
})

完全匹配

在路由中，當我們的地址與組件完全匹配的時候會添加一個class屬性router-link-exact-active，我們可以給這個class屬性添加一些樣式。

.router-link-exact-active {
  color: #42b983;
}

包含匹配

在路由中，地址包含了當前組件的地址是，會添加一個class屬性router-link-active，同樣也可以添加一些樣式。

.router-link-active {
  color: #42b983;
}

router-link-exact-active 和 router-link-active 的屬性名可能會太過於長，我們可以重新配置下名字

const router = new VueRouter({
    mode: "history", // 設置爲歷史模式
    linkExactActiveClass: "active-exact", //配置完全匹配的class名字
    linkActiveClass: "active", //配置包含匹配的class名字
    routes
})

配置完成後我們就可以使用active-exact和active來代替他們使用。

重定向

當進入指定路由後跳轉到指定路由界面。

const routes = [{
        path: '/',
        redirect: './Home',
    }, {
        path: '/Home',
        name: 'Home',
        component: Home
    }
]

導航守衛（鉤子函數）

全局守衛

beforeEach

當導航觸發時調用。

router.beforeEach( (to,from,next) => {
	// ...body
} )

beforeResolve

在所有的組件內守衛解析後執行。

router.beforeResolve( (to,from,next) => {
	// ...body
} )

afterEach

在beforeResolve之後調用，次鉤子函數沒有next。

router.afterEach( (to,from) => {
	// ...body
} )

路由獨享守衛

beforeEnter

在路由組件創建後觸發。

routes : [
  {
    path: '/home',   //跳轉的路徑
    name: 'home',   //組件的名稱
    component: Home,   //加載的組件
    beforeEnter (to,from,next){   //路由獨享守衛
      // ...body
    }
  }
]

組件守衛

beforeRouteEnter

解析時調用，此時組件還沒有被創建，所以不能使用this。

export default{
	beforeRouteEnter(to,from,next){
		// ...body
	}
}

beforeRouteUpdate

組件是不會重新加載，路由改變的時候，組件被重新渲染。

export default{
	beforeRouteUpdate(to,from,next){
		// ...body
	}
}

beforeRouteLeave

離開對應路由時觸發，通常用於用戶未保存後突然離開，可以通過next(false)來取消。

export default{
	beforeRouteLeave(to,from,next){
		// ...body
	}
}

• to ：即將要進入的目標路由對象
• from ：當前導航正要離開的路由
• next : 管道，一定要調用此方法來resolve這個鉤子
  • next() 繼續下面的鉤子函數
  • next(false) 取消當前的導航
  • next("/") 或者 next({ path : “/” }) 跳轉到一個不同的地址

導航守衛解析流程