1.設置路由
① 路由map
在main.js中導入vue-router
import VRouter from 'vue-router'
設置全局路由
Vue.use(VRouter)
實例化router
let router = new VRouter({
// 如果mode設為history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接訪問. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
mode: 'history',
routes: [
// 做一個映射表
{
path: '/apple',
component: Apple
},
{
path: '/banana',
component: Banana
}
]
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
②路由視圖
在app.vue文件中嵌入<router-view></router-view>
<template>
<div id="app">
<!--
訪問apple的時候,將apple的視圖塞到這個位置
訪問banana的時候,將banana的視圖塞到這個位置
-->
<router-view></router-view>
</div>
</template>
實現效果
路由視圖
③ 路由導航
在app.vue文件中,嵌入router-link標簽,該標簽可以實現a標簽的效果
<router-link :to="{path:'apple'}">to apple</router-link>
具體使用:
<template>
<div id="app">
<!--
訪問apple的時候,將apple的視圖塞到這個位置
訪問banana的時候,將banana的視圖塞到這個位置
-->
<router-view></router-view>
<router-link :to="{path:'apple'}">to apple</router-link>
<router-link :to="{path:'banana'}">to banana</router-link>
</div>
</template>
效果:
路由導航
2.路由參數
作用:為頁面傳遞路由參數.
在路由映射表中配置需要傳遞的參數:
比如:apple頁面,我需要傳遞一個color的參數,可以在path中以:開頭設置參數.
path: '/apple/:color',
具體使用:
let router = new VRouter({
// 如果mode設為history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接訪問. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
mode: 'history',
routes: [
// 做一個映射表
{
path: '/apple/:color',
component: Apple
},
{
path: '/banana',
component: Banana
}
]
})
當我在頁面跳轉時,直接在地址后面拼接參數,下面的red,即為傳遞的color參數
http://localhost:8080/apple/red
在script標簽中獲取頁面傳遞的參數,通過this.$route.params全局的對象來獲取
<template>
<div class="hello">
<h1>{{msg}}</h1>
<button @click="getParams">get params</button>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'I am componnet apple'
}
},
methods: {
getParams () {
console.log(this.$route.params)
}
}
}
</script>
上面的打印結果為:
{color: "red"}
在template標簽中使用界面傳遞過來的參數,可以使用$route.params.color
<template>
<div class="hello">
<h1>{{msg}}</h1>
<p>{{$route.params.color}}</p>
<button @click="getParams">get params</button>
</div>
</template>
$route.params.color 獲取頁面傳遞的參數
傳遞多個參數
路由中設置如下:
path: '/apple/:color/detail/:type',
傳遞參數的url:
http://localhost:8080/apple/red/detail/3
打印傳遞過來的所有參數:
{color: "red", type: "3"}
3.嵌套路由(子路由)
children
嵌套路由,子路由插入到了父組件apple中
let router = new VRouter({
// 如果mode設為history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接訪問. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
mode: 'history',
routes: [
// 做一個映射表
{
path: '/apple',
component: Apple,
// 嵌套路由,子路由插入到了父組件apple中
children: [
{
path: 'red',
component: RedApple
}
]
},
{
path: '/banana',
component: Banana
}
]
})
在父路由apple組件中,將RedApple組件插入進來
<template>
<div class="hello">
.......
<router-view></router-view>
</div>
</template>
嵌套子路由
to red apple
<router-link :to="{path:'apple/red'}">to red apple</router-link>
路由的其他操作
基于當前路徑下,跳轉到apple
<router-link to="apple">to apple</router-link>
上面的和下面的區別
<router-link :to="{path:'banana'}">to banana</router-link>
如果要跳到根目錄,在apple前加/
<router-link to="/apple">to apple</router-link>
上面的和下面的區別
<router-link :to="{path:'banana'}">to banana</router-link>
如果綁定的話,我們也可以動態的修改路徑
<template>
<div id="app">
<router-link :to="path">to apple</router-link>
......
</div>
</template>
<script>
export default {
data () {
return {
path: 'apple'
}
}
}
</script>
如果綁定的話,不想動態修改路徑,我們也可以直接寫死,
注意:apple一定要用單引號括起來,不然他會去data里面找apple,會報找不到對象的error
<router-link :to="'apple'">to apple</router-link>
也可以傳遞參數
<router-link :to="{path:'banana',param:{color:'yellow'}}">to banana</router-link>
通過tag,將link變成li標簽,當然也可以設置變成其他標簽
<router-link :to="'apple'" tag="li">to apple</router-link>
*以上都屬于聲明式導航
下面感受下編程式導航
可以通過push,跳轉到特定的頁面
router.push('apple')
或者
router.push({path: 'apple'})
或者name
......
應用場景:
當我們每次路由切換的時候,為他設置一些操作
比方說:檢查用戶的登錄狀態,如果用戶未登錄,就通過編程式導航跳轉到登錄界面
router.beforeEach(router.push('登錄界面'))
4.命名路由和命名視圖
- 命名路由
我們可以在設置路由時,給設一個name屬性,導航過程中直接:to="{name: '對應的name'}"即可
let router = new VRouter({
mode: 'history',
routes: [
{
path: '/apple',
component: Apple,
//命名路由
name: 'applePage',
}
......
]
})
在外面其他地方使用時:
<router-link :to="{name: 'applePage'}" >to apple</router-link>
- 命名視圖
和上面的命名路由相似,給component,添加指定的命名
let router = new VRouter({
mode: 'history',
routes: [
{
path: '/apple',
//命名視圖
component: {
viewA: Apple,
viewB: RedApple
},
//命名路由
name: 'applePage',
}
......
]
})
在外面其他地方使用時:
<router-view name="viewA"></router-view>
或者
<router-view name="viewB"></router-view>
分別插入不同的視圖
5.重定向
redirect
初始化路由時設置
let router = new VRouter({
// 如果mode設為history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接訪問. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
mode: 'history',
routes: [
{
//當路徑為'/'時,重新跳轉到apple
path: '/',
//設置重定向
redirect: '/apple'
},
{
path: '/apple',
......
},
{
path: '/banana',
......
}
]
})
重定向
6.使用過渡動畫制作路由跳轉動畫
keep-live :切換過的視圖會被緩存起來,如果不加keep-live 每次都會去重新請求一次,這樣比較消耗資源
<transition name="fade">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
注意:
當我們切換導航的時候,當前的link標簽的類會被賦值為class="router-link-active",這是一個很有用的操作.
給router-link添加active-class="active" 用于修改樣式
<ul>
<router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
{{ item.name }}
</router-link>
</ul>
css部分
選種和hover時,顯示藍色
.product-board li.active,
.product-board li:hover {
background: #4fc08d;
color: #fff;
}
......
-
router-view的keep-alive屬性,保證該視圖只渲染一次,來回切換不重復渲染
<router-view :seller="seller" keep-alive></router-view>
router-view的keep-alive屬性
