- router-link 和 route-view 組件
- 路由配置
2.1. 動態路由
2.2. 嵌套路由
2.3. 命名路由
2.4. 命名視圖 - 重定向和別名
- JS 操作路由
1. router-link 和 route-view 組件
router-link 組件封裝了一個 a 標籤，<router-link> 相當於 <a href="...">，支持用戶在具有路由功能的應用中 (點擊) 導航。 通過 to 屬性指定目標地址，默認渲染成帶有正確鏈接的 <a> 標籤，可以通過配置 tag 屬性生成別的標籤。另外，當目標路由成功激活時，鏈接元素自動設置一個表示激活的 CSS 類名。
route-view 是視圖渲染組件，通過 route-link 指定的路徑都會在這個裏面去渲染
2. 路由配置
首先，一個路由列表它是一個組件，在裏面包含着路由對象。最基本的路由對象必須包含兩個屬性：path 和 component。path 是 url 路徑，component 是想要渲染的組件。
import Home from '@/views/Home.vue'
export default [
{
path: '/',
component: Home,
},
{
path: '/about',
// lazy-loaded 懶加載，即沒有點擊這個 path 不會加載該組件，起到優化作用。
component: () => import('@/views/About.vue'),
}
]
2.1 動態路由
router.js 代碼：
import Home from '@/views/Home.vue'
export default [
{
path: '/',
component: Home,
},
{
path: '/about',
// lazy-loaded 懶加載，即沒有點擊這個 path 不會加載該組件，起到優化作用。
component: () => import('@/views/About.vue'),
},
// 動態路由
{
// name 就是一個動態路由參數
path: '/arg/:name',
component: () => import('@/views/arg.vue')
},
]
arg.vue 代碼：
<template>
<div>
{{ $route.params.name }}
</div>
</template>
<script>
export default {
//
}
</script>
$route：當前激活的路由信息對象，$route.params.name 表示路由中有一個 params 對象，params 對象有一個 name 屬性，這裏的 name 就是在 route.js 中 path 後面所定義的動態路由參數
路由對象屬性
$route.path
類型: string
字符串，對應當前路由的路徑，總是解析爲絕對路徑，如 "/foo/bar"。
$route.params
類型: Object
一個 key/value 對象，包含了動態片段和全匹配片段，如果沒有路由參數，就是一個空對象。
$route.query
類型: Object
一個 key/value 對象，表示 URL 查詢參數。例如，對於路徑 /foo?user=1，則有 $route.query.user == 1，如果沒有查詢參數，則是個空對象。
$route.hash
類型: string
當前路由的 hash 值 (帶 #) ，如果沒有 hash 值，則爲空字符串。
$route.fullPath
類型: string
完成解析後的 URL，包含查詢參數和 hash 的完整路徑。
$route.matched
類型: Array<RouteRecord>
一個數組，包含當前路由的所有嵌套路徑片段的路由記錄 。路由記錄就是 routes 配置數組中的對象副本 (還有在 children 數組)。
當 URL 爲 /foo/bar，$route.matched 將會是一個包含從上到下的所有對象 (副本)。
$route.name
當前路由的名稱，如果有的話。
$route.redirectedFrom
如果存在重定向，即爲重定向來源的路由的名字。
通過在 Vue 根實例的 router 配置傳入 router 實例，下面這些屬性成員會被注入到每個子組件。
this.$router
router 實例。
this.$route
當前激活的路由信息對象。這個屬性是隻讀的，裏面的屬性是 immutable (不可變) 的，
2.2 嵌套路由
router.js：
import Home from '@/views/Home.vue'
export default [
{
path: '/',
component: Home,
},
{
path: '/about',
// lazy-loaded 懶加載，即沒有點擊這個 path 不會加載該組件，起到優化作用。
component: () => import('@/views/About.vue'),
},
// 嵌套路由
{
path: '/parent',
component: () => import('@/views/parent.vue'),
children: [
{
// 嵌套字節點，不添加 /
// path: '/child',
path: 'child',
component: () => import('@/views/child.vue')
}
]
},
]
parent.vue：
<template>
<div>
I am parent
<!-- 用來渲染路由視圖 -->
<route-view/>
</div>
</template>
<script>
export default {
//
}
</script>
child.vue：
<template>
<div>
I am child
</div>
</template>
2.3 命名路由
router.js
import Home from '@/views/Home.vue'
export default [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
// lazy-loaded 懶加載，即沒有點擊這個 path 不會加載該組件，起到優化作用。
component: () => import('@/views/About.vue'),
},
]
多了一個 name 關鍵字，這裏在組件中引用，可以使用 name 的值來引用。
<template>
<div id="app">
<div id="nav">
<route-link :to="{ name: 'home' }">Home</route-link>
<route-link :to="{ name: 'about' }">About</route-link>
</div>
<route-view/>
</div>
</template>
<script>
export default {
//
}
</script>
2.4 命名視圖
<route-view>，如果我們想在同一個頁面上顯示多個視圖，而且讓每一個視圖顯示在指定位置的話，這個時候我們就可以使用命名視圖。
router.js：
import Home from '@/views/Home.vue'
export default [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
// lazy-loaded 懶加載，即沒有點擊這個 path 不會加載該組件，起到優化作用。
component: () => import('@/views/About.vue'),
},
// 命名視圖
{
path: '/name_view',
// 這裏注意，是 components 表示加載多個組件
components: {
// 默認沒有命名，加載 default
default: () => import('@/veiws/child.vue'),
email: () => import('@/views/email.vue'),
tel: () => import('@/views/tel.vue')
}
}
]
多個 <route-view> 包含多個視圖：
<template>
<div id="app">
<div id="nav">
<route-link :to="{ name: 'home' }">Home</route-link>
<route-link :to="{ name: 'about' }">About</route-link>
</div>
<route-view/>
<route-view name="email"/>
<route-view name="tel"/>
</div>
</template>
email.vue：
<template>
<div>
email: [email protected]
</div>
</template>
tel.vue：
<template>
<div>
tel: 13838383838
</div>
</template>
3. 重定向和別名
重定向：將當前要訪問的 url 轉到另一個指定的 url
別名：給引用路徑設置一個其他名稱。使用 alias 關鍵字
router.js：
import Home from '@/views/Home.vue'
export default [
{
path: '/',
alias: '/my_home',
name: 'home',
component: Home,
},
{
path: '/about',
name: 'about',
// lazy-loaded 懶加載，即沒有點擊這個 path 不會加載該組件，起到優化作用。
component: () => import('@/views/About.vue'),
},
// 重定向
{
// 當我們訪問 '/main' 時，重定向到 '/'
path: '/main',
redirect: '/',
// 也可以使用命名路由
//redirect: {
// name: 'home'
//}
}
]
4.JS 操作路由(編程式導航)
編程式導航需要獲取一個路由實例，通過 this.$router 來獲取。
Home.vue：
<template>
<div id="home">
<button @click="handleClick('back')">返回上一頁</button>
<button @click="handleClick('push')">跳轉到 parent </button>
<button @click="handleClick('replace')">替換到 parent </button>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
component: { HelloWorld },
method: {
handleClick (type) {
//this.$router.go(-1)
if (type === 'back') {
this.$router.back()
} else if (type === 'push') {
this.$router.push({
// 通過命名路由的方式
name: 'parent',
// 方法2: 動態路由參數
params：{
name: 'wayne'
}
//// 方法1：url 中帶查詢參數
//query: {
// name: 'wayne'
//}
})
} else if (type === 'replace') {
// 使用 replace， 它與 push 的區別是 replace 是替換，
// 它不會被記錄在路由記錄中
this.$router.replace({
name: 'parent'
})
}
}
}
}
</script>