怎么重定向頁面？
第一種方法：
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
第二種方法:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
第三種方法：
const router = new VueRouter({
routes: [
{
path: '/a',
redirect: to =>{
const { hash, params, query } = to
if (query.to === 'foo') {
return { path: '/foo', query: null }
}else{
return '/b'
}
}
}
]
})
怎么配置404頁面油狂？
const router = new VueRouter({
routes: [
{
path: '*', redirect: {path: '/'}
}
]
})
切換路由時(shí)培廓，需要保存草稿的功能揪阿，怎么實(shí)現(xiàn)呢？
<keep-alive :include="include">
<router-view></router-view>
</keep-alive>
其中include可以是個(gè)數(shù)組，數(shù)組內(nèi)容為路由的name選項(xiàng)的值坛缕。
路由有幾種模式猫牡？說說它們的區(qū)別胡诗？
hash: 兼容所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器，例http://www.abc.com/#/index乃戈，hash值為#/index褂痰， hash的改變會(huì)觸發(fā)hashchange事件，通過監(jiān)聽hashchange事件來完成操作實(shí)現(xiàn)前端路由症虑。hash值變化不會(huì)讓瀏覽器向服務(wù)器請(qǐng)求缩歪。// 監(jiān)聽hash變化，點(diǎn)擊瀏覽器的前進(jìn)后退會(huì)觸發(fā)
window.addEventListener('hashchange', function(event){
let newURL = event.newURL; // hash 改變后的新 url
let oldURL = event.oldURL; // hash 改變前的舊 url
},false)
history: 兼容能支持 HTML5 History Api 的瀏覽器谍憔，依賴HTML5 History API來實(shí)現(xiàn)前端路由匪蝙。沒有#，路由地址跟正常的url一樣习贫，但是初次訪問或者刷新都會(huì)向服務(wù)器請(qǐng)求逛球，如果沒有請(qǐng)求到對(duì)應(yīng)的資源就會(huì)返回404，所以路由地址匹配不到任何靜態(tài)資源苫昌，則應(yīng)該返回同一個(gè)index.html 頁面颤绕，需要在nginx中配置。
abstract: 支持所有 JavaScript 運(yùn)行環(huán)境祟身，如 Node.js 服務(wù)器端奥务。如果發(fā)現(xiàn)沒有瀏覽器的 API，路由會(huì)自動(dòng)強(qiáng)制進(jìn)入這個(gè)模式袜硫。
講一下完整的導(dǎo)航守衛(wèi)流程氯葬？
導(dǎo)航被觸發(fā)。
在失活的組件里調(diào)用離開守衛(wèi)beforeRouteLeave(to,from,next)婉陷。
調(diào)用全局的beforeEach( (to,from,next) =>{} )守衛(wèi)帚称。
在重用的組件里調(diào)用 beforeRouteUpdate(to,from,next) 守衛(wèi)。
在路由配置里調(diào)用beforeEnter(to,from,next)路由獨(dú)享的守衛(wèi)秽澳。
解析異步路由組件闯睹。
在被激活的組件里調(diào)用beforeRouteEnter(to,from,next)。
在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后調(diào)用全局的beforeResolve( (to,from,next) =>{} )解析守衛(wèi)担神。
導(dǎo)航被確認(rèn)瞻坝。
調(diào)用全局的afterEach( (to,from) =>{} )鉤子。
觸發(fā) DOM 更新杏瞻。
用創(chuàng)建好的實(shí)例調(diào)用beforeRouteEnter守衛(wèi)中傳給 next 的回調(diào)函數(shù)beforeRouteEnter(to, from, next) {
next(vm => {
//通過vm訪問組件實(shí)例
})
},
路由導(dǎo)航守衛(wèi)和Vue實(shí)例生命周期鉤子函數(shù)的執(zhí)行順序所刀？
路由導(dǎo)航守衛(wèi)都是在Vue實(shí)例生命周期鉤子函數(shù)之前執(zhí)行的。
講一下導(dǎo)航守衛(wèi)的三個(gè)參數(shù)的含義捞挥？
to：即將要進(jìn)入的目標(biāo) 路由對(duì)象浮创。
from：當(dāng)前導(dǎo)航正要離開的路由對(duì)象。
next：函數(shù)砌函，必須調(diào)用斩披，不然路由跳轉(zhuǎn)不過去溜族。
next()：進(jìn)入下一個(gè)路由。
next(false)：中斷當(dāng)前的導(dǎo)航垦沉。
next('/')或next({ path: '/' }) : 跳轉(zhuǎn)到其他路由煌抒，當(dāng)前導(dǎo)航被中斷，進(jìn)行新的一個(gè)導(dǎo)航厕倍。
在afterEach鉤子中可以使用next()嗎寡壮？
不可以，不接受next的參數(shù)讹弯。
全局導(dǎo)航守衛(wèi)有哪些况既？怎么使用？
router.beforeEach：全局前置守衛(wèi)组民。
router.beforeResolve：全局解析守衛(wèi)棒仍。
router.afterEach：全局后置鉤子。
import VueRouter from 'vue-router';
const router = new VueRouter({
mode: 'history',
base: '/',
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
}
})
router.beforeEach((to, from, next) => {
//...
next();
})
router.beforeResolve((to, from, next) => {
//...
next();
})
router.afterEach((to, from) => {
//...
});
什么是路由獨(dú)享的守衛(wèi)臭胜，怎么使用莫其？
是beforeEnter守衛(wèi)
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
在組件內(nèi)使用的導(dǎo)航守衛(wèi)有哪些？怎么使用耸三？
beforeRouteLeave：在失活的組件里調(diào)用離開守衛(wèi)乱陡。
beforeRouteUpdate：在重用的組件里調(diào)用,比如包含<router-view />的組件。
beforeRouteEnter：在進(jìn)入對(duì)應(yīng)路由的組件創(chuàng)建前調(diào)用吕晌。
beforeRouteLeave(to, from, next) {
//...
},
beforeRouteUpdate(to, from, next) {
//...
},
beforeRouteEnter(to, from, next) {
//...
},
在beforeRouteEnter導(dǎo)航守衛(wèi)中可以用this嗎蛋褥？
不可以临燃，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒被創(chuàng)建睛驳。
可以通過傳一個(gè)回調(diào)給next來訪問組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)膜廊，并且把組件實(shí)例作為回調(diào)方法的參數(shù)乏沸。
beforeRouteEnter(to, from, next) {
next(vm => {
console.log(vm)
})
}
說說你對(duì)router-link的了解
<router-link>是Vue-Router的內(nèi)置組件，在具有路由功能的應(yīng)用中作為聲明式的導(dǎo)航使用爪瓜。
<router-link>有8個(gè)props蹬跃，其作用是：
to：必填，表示目標(biāo)路由的鏈接铆铆。當(dāng)被點(diǎn)擊后蝶缀，內(nèi)部會(huì)立刻把to的值傳到router.push()，所以這個(gè)值可以是一個(gè)字符串或者是描述目標(biāo)位置的對(duì)象薄货。
<router-link to="home">Home</router-link>
<router-link :to="'home'">Home</router-link>
<router-link :to="{ path: 'home' }">Home</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
<router-link :to="{ path: 'user', query: { userId: 123 }}">User</router-link>
注意path存在時(shí)params不起作用翁都，只能用query
replace：默認(rèn)值為false，若設(shè)置的話谅猾，當(dāng)點(diǎn)擊時(shí)柄慰，會(huì)調(diào)用router.replace()而不是router.push()鳍悠，于是導(dǎo)航后不會(huì)留下 history 記錄。
append：設(shè)置 append 屬性后坐搔，則在當(dāng)前 (相對(duì)) 路徑前添加基路徑藏研。
tag：讓<router-link>渲染成tag設(shè)置的標(biāo)簽，如tag:'li,渲染結(jié)果為<li>foo</li>概行。
active-class：默認(rèn)值為router-link-active,設(shè)置鏈接激活時(shí)使用的 CSS 類名蠢挡。默認(rèn)值可以通過路由的構(gòu)造選項(xiàng) linkActiveClass 來全局配置。
exact-active-class：默認(rèn)值為router-link-exact-active,設(shè)置鏈接被精確匹配的時(shí)候應(yīng)該激活的 class占锯。默認(rèn)值可以通過路由構(gòu)造函數(shù)選項(xiàng) linkExactActiveClass 進(jìn)行全局配置的袒哥。
exact：是否精確匹配，默認(rèn)為false消略。
<router-link to="/" exact></router-link>
event：聲明可以用來觸發(fā)導(dǎo)航的事件堡称。可以是一個(gè)字符串或是一個(gè)包含字符串的數(shù)組艺演，默認(rèn)是click却紧。
怎么在組件中監(jiān)聽路由參數(shù)的變化？
有兩種方法可以監(jiān)聽路由參數(shù)的變化胎撤，但是只能用在包含<router-view />的組件內(nèi)晓殊。
第一種watch: {
'$route'(to, from) {
//這里監(jiān)聽
},
},
第二種beforeRouteUpdate (to, from, next) {
//這里監(jiān)聽
},
切換路由后，新頁面要滾動(dòng)到頂部或保持原先的滾動(dòng)位置怎么做呢伤提？
滾動(dòng)頂部const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
} else {
return { x: 0, y: 0 };
}
}
});
復(fù)制代碼
滾動(dòng)原先位置
在什么場(chǎng)景下會(huì)用到嵌套路由巫俺？
做個(gè)管理系統(tǒng)，頂部欄和左側(cè)菜單欄是全局通用的肿男，那就應(yīng)該放在父路由介汹，而右下的頁面內(nèi)容部分放在子路由。
比如在app.vue文件中
<template>
<div>
<router-view/>
</div>
</template>
復(fù)制代碼在layout.vue文件中
<template>
<div>
<div>
//...頭部導(dǎo)航
</div>
<div>
//...側(cè)邊欄導(dǎo)航
</div>
<div>
//...主內(nèi)容
<router-view/>
</div>
</div>
</template
復(fù)制代碼在routes.js文件中
function load(component) {
return resolve => require([views/${component}], resolve);
}
const routes=[
{
path: '/',
redirect: '/home',
name: 'layout',
component: load('layout'),
children: [
{
path: '/home',
name: 'home',
component: load('home'),
meta: {
title: '首頁'
},
},
]
}
]
復(fù)制代碼然后layout頁面就渲染在app.vue文件中的<router-view/>上舶沛。home頁面就渲染在layout.vue文件夾中的<router-view/>上嘹承。
什么是命名視圖，舉個(gè)例子說明一下如庭？
在項(xiàng)目中叹卷，我們想同級(jí)展示多個(gè)視圖，而不是嵌套展示坪它。例如項(xiàng)目首頁骤竹，有頭部導(dǎo)航，側(cè)邊欄導(dǎo)航往毡、主內(nèi)容區(qū)域蒙揣。頭部導(dǎo)航、側(cè)邊欄導(dǎo)航我們不想用組件方式引入卖擅，想用視圖方式展示鸣奔。那么這個(gè)首頁上墨技，就有三個(gè)視圖，頭部導(dǎo)航視圖挎狸，側(cè)邊欄導(dǎo)航視圖扣汪、主內(nèi)容區(qū)域視圖同級(jí)展示。
在layout.vue文件中
<template>
<div>
<div>
//...頭部導(dǎo)航
<router-view name='header'></router-view>
<div>
//...側(cè)邊欄導(dǎo)航
<router-view name='sider'></router-view>
</div>
<div>
//...主內(nèi)容
<router-view/>
</div>
</div>
</template
復(fù)制代碼如果 router-view 沒有設(shè)置name锨匆，那么默認(rèn)為default崭别。一個(gè)視圖使用一個(gè)組件渲染，因此對(duì)于同個(gè)路由恐锣，多個(gè)視圖就需要多個(gè)組件茅主。確保正確使用 components 配置 (記得加上s)。
在routes.js文件中
function load(component) {
return resolve => require([views/${component}], resolve);
}
const routes=[
{
path: '/',
redirect: '/home',
name: 'layout',
component: load('layout'),
children: [
{
path: '/home',
name: 'home',
components: {
default: load('main'),
header: load('header'),
sider: load('sider')
},
meta: {
title: '首頁'
},
},
]
}
]
復(fù)制代碼
如何獲取路由傳過來的參數(shù)土榴？
路由有三種傳參方式诀姚，獲取方式各不相同。
meta：路由元信息玷禽，寫在routes配置文件中赫段。{
path: '/home',
name: 'home',
component: load('home'),
meta: {
title: '首頁'
},
},
復(fù)制代碼獲取方式this.route.push({
path:'/home',
query:{
userId:123
}
})
復(fù)制代碼瀏覽器地址：http://localhost:8036/home?userId=123
獲取方式：this.$route.query.userId
params：這種方式比較麻煩。
首先要在地址上做配置{
path: '/home/:userId',
name: 'home',
component: load('home'),
meta: {
title: '首頁'
},
},
復(fù)制代碼
訪問傳參const userId = '123'
this.router.push({ path: '/home', params: { userId }})不生效给涕。
瀏覽器地址：http://localhost:8036/home/123
獲取方式：this.$route.params.userId
路由組件和路由為什么解耦，怎么解耦额获？
因?yàn)樵诮M件中使用 $route 會(huì)使之與其對(duì)應(yīng)路由形成高度耦合够庙，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性咪啡，所有要解耦首启。
耦合如以下代碼所示暮屡。Home組件只有在http://localhost:8036/home/123URL上才能使用撤摸。const Home = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/home/:id', component: Home }
]
})
復(fù)制代碼
使用 props 來解耦
props為true，route.params將會(huì)被設(shè)置為組件屬性褒纲。
props為對(duì)象准夷，則按原樣設(shè)置為組件屬性。
props為函數(shù)莺掠，http://localhost:8036/home?id=123,會(huì)把123傳給組件Home的props的id衫嵌。
const Home = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/home/:id', component: Home, props: true},
// 對(duì)于包含命名視圖的路由，你必須分別為每個(gè)命名視圖添加 props 選項(xiàng)：
{
path: '/home/:id',
components: { default: Home, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
{ path: '/home', component: Home, props: {id:123} },
{ path: '/home', component: Home, props: (route) => ({ id: route.query.id }) },
]
})
復(fù)制代碼
說說active-class是哪個(gè)組件的屬性彻秆？
<router-link/>組件的屬性楔绞，設(shè)置鏈接激活時(shí)使用的 CSS 類名结闸。默認(rèn)值可以通過路由的構(gòu)造選項(xiàng) linkActiveClass 來全局配置。
在vue組件中怎么獲取到當(dāng)前的路由信息酒朵？
通過this.$route來獲取
怎樣動(dòng)態(tài)加載路由桦锄？
使用Router的實(shí)例方法addRoutes來實(shí)現(xiàn)動(dòng)態(tài)加載路由，一般用來實(shí)現(xiàn)菜單權(quán)限蔫耽。
使用時(shí)要注意结耀，靜態(tài)路由文件中不能有404路由，而要通過addRoutes一起動(dòng)態(tài)添加進(jìn)去匙铡。
const routes = [
{
path: '/overview',
name: 'overview',
component: () => import('@/views/account/overview/index'),
meta: {
title: '賬戶概覽',
pid: 869,
nid: 877
},
},
{
path: '*',
redirect: {
path: '/'
}
}
]
vm.router.addRoutes(routes);
復(fù)制代碼
怎么實(shí)現(xiàn)路由懶加載呢图甜？
function load(component) {
//return resolve => require([views/${component}], resolve);
return () => import(views/${component});
}
const routes = [
{
path: '/home',
name: 'home',
component: load('home'),
meta: {
title: '首頁'
},
},
]
復(fù)制代碼
路由之間是怎么跳轉(zhuǎn)的？有哪些方式鳖眼？
聲明式 通過使用內(nèi)置組件<router-link :to="/home">來跳轉(zhuǎn)
編程式 通過調(diào)用router實(shí)例的push方法router.push({ path: '/home' })或replace方法router.replace({ path: '/home' })
如果vue-router使用history模式黑毅，部署時(shí)要注意什么？
要注意404的問題钦讳，因?yàn)樵趆istory模式下博肋，只是動(dòng)態(tài)的通過js操作window.history來改變?yōu)g覽器地址欄里的路徑，并沒有發(fā)起http請(qǐng)求蜂厅，當(dāng)直接在瀏覽器里輸入這個(gè)地址的時(shí)候匪凡，就一定要對(duì)服務(wù)器發(fā)起http請(qǐng)求，但是這個(gè)目標(biāo)在服務(wù)器上又不存在掘猿，所以會(huì)返回404病游。
所以要在Ngnix中將所有請(qǐng)求都轉(zhuǎn)發(fā)到index.html上就可以了。
location / {
try_files uri/ @router index index.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
復(fù)制代碼
route和router有什么區(qū)別稠通？
route是“路由信息對(duì)象”衬衬，包括path，params改橘，hash滋尉，query，fullPath飞主，matched狮惜，name等路由信息參數(shù)。 而router是“路由實(shí)例對(duì)象”碌识，包括了路由的跳轉(zhuǎn)方法碾篡，鉤子函數(shù)等。
Vue路由怎么跳轉(zhuǎn)打開新窗口筏餐？
const obj = {
path: xxx,//路由地址
query: {
mid: data.id//可以帶參數(shù)
}
};
const {href} = this.$router.resolve(obj);
window.open(href, '_blank');
