前端技術(shù)面試之VueRouter

ue路由器

路由初體驗

安裝

<pre class="hljs sql" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">npm install --save vue-router
復(fù)制代碼</pre>

使用

router.js 路由配置

<pre class="prettyprint hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">@ 如果你的Vue-Cli 是 3 的版本，可以在創(chuàng)建項目的同時，可以選擇安裝router 插件
vue ui

  1. 創(chuàng)建好項目，自帶的router文件就是路由配置文件

import Vue from 'vue'
// 引入 vue-router
import VueRouter from 'vue-router'
import Father from '../views/Father.vue'

  1. 在全局使用這個vue-router
    Vue.use(VueRouter)

  2. 配置路由選項
    const routes = [
    {
    path: '/',
    name: 'Father',
    component: Father,
    meta: {
    keepAlive: true // 需要緩存
    }
    }
    ]

  3. 創(chuàng)建Vue-router實例，掛載router配置項
    const router = new VueRouter({
    routes
    })

4.最后導(dǎo)出 Vue-router實例， 提供給 Vue 掛載使用
export default router

復(fù)制代碼</pre>

index.js Vue入口文件配置

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">import Vue from 'vue'
import App from './App.vue'

  1. 引入 路由配置文件
    import router from './router'
    import store from './store'

Vue.config.productionTip = false

  1. 將路由掛載到 Vue實例中使用。
    new Vue({
    router,
    store,
    render: h => h(App)
    }).$mount('#app')

復(fù)制代碼</pre>

動態(tài)路由傳遞參數(shù)

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">const routes = [
{
1. 通過在url后：參數(shù)即可
path: '/home/:name',
name: 'home',
component: Father,
meta: {
keepAlive: true // 需要緩存
}
}
]

2.接收路由參數(shù)： this.$route.params.路由參數(shù)
復(fù)制代碼</pre>

捕獲404頁面

<pre class="prettyprint hljs ruby" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">{
// 會匹配所有路徑
path: ''
}
{
// 會匹配以 /user- 開頭的任意路徑
path: '/user-'
}

當(dāng)使用一個通配符時，$route.params 內(nèi)會自動添加一個名為 pathMatch 參數(shù)。它包含了 URL 通過通配符被匹配的部分：

  1. this.$route.params.pathMatch 來獲取通配符后的url
    復(fù)制代碼</pre>

嵌套路由

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">1. 通過在父路由中添加 children 數(shù)組，直接引入嵌套組件和配置path

  1. 頁面中使用 通過 <router-link to="/父路由path/嵌套path">小紅</router-link>
    3. 配置顯示入口 <router-view></router-view>

{
path: '/teacher',
name: 'teacher',
component: () => import('../views/Teacher/Teacher.vue'),
children: [
{
path: 'xiaohong',
component: () => import('../views/Teacher/XiaoHong.vue')
},
{
path: 'xiaoming',
component: () => import('../views/Teacher/XiaoMing.vue')
}
]
}
復(fù)制代碼</pre>

image

編程式導(dǎo)航

導(dǎo)航分為：

router.push 來實現(xiàn)編程式導(dǎo)航

<router-link> 聲明式導(dǎo)航創(chuàng)建標(biāo)簽來定義導(dǎo)航鏈接

router.push 會向歷史記錄棧添加一個新的記錄，所以，當(dāng)用戶點擊瀏覽器后退按鈕時，則回到之前的URL。

router.push

<pre class="prettyprint hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 字符串
router.push('home')

// 對象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 帶查詢參數(shù)，變成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: /user/${userId} }) // -> /user/123
復(fù)制代碼</pre>

router.replace

它不會向歷史添加新記錄，它會替換當(dāng)前路徑

<pre class="prettyprint hljs vbscript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">1.聲明式寫法
<router-link :to="..." replace>

2.編程式寫法
router.replace(...)
復(fù)制代碼</pre>

router.go(n)

路由的前進和后退，前進合并整數(shù)，后退預(yù)定負(fù)數(shù)

命名路由

所謂命名路由，給路由配置名稱屬性，然后在頁面中也可以使用 this.$router.push({ name: 'home'，{params:name='Test'}}) 進行路由轉(zhuǎn)換傳遞參數(shù)，很方便。

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">const routes = [
{
path: '/home:name',
name: 'home',
component: Father,
}
]

1 通過命名路由來實現(xiàn) 路由跳轉(zhuǎn)和傳遞參數(shù)
this.$router.push({ name: 'home'，{params:name='Test'}})
復(fù)制代碼</pre>

重新重定向

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">1. redirect: '/b'

  1. 重定向的目標(biāo)也可以是一個命名的路由： redirect: { name: 'foo' }
    復(fù)制代碼</pre>

路由守衛(wèi)

以以著（或）者（其），（、、、、、、、、、、、、（，），定向到登陸頁。

<pre class="prettyprint hljs ruby" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">
router.beforeEach((to, from, next) => {
//我在這里模仿了一個獲取用戶信息的方法
let isLogin = window.sessionStorage.getItem('userInfo');
if (isLogin) {
//如果用戶信息存在則往下執(zhí)行。
next()
} else {
//如果用戶token不存在則跳轉(zhuǎn)到login頁面
if (to.path === '/login') {
next()
} else {
next('/login')
}
}
})
復(fù)制代碼</pre>

路由過渡特效

<pre class="prettyprint hljs xml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">1.給路由入口加入 transition

<transition>
<router-view></router-view>
</transition>

  1. 實現(xiàn)不同的過渡特效 ，組件內(nèi)使用 <transition> 并設(shè)置不同的 name。
    <transition name="long">
    <div class="main">...</div>
    </transition>
    復(fù)制代碼</pre>

路由懶加載

官方：當(dāng)打包發(fā)展應(yīng)用時，JavaScript包會變得非常大，影響頁面加載。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(yīng)組件，這樣就更加高效了。

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">1. 所有路由都放置在一個同步塊中 .routerPath.js 中

const Foo = () => import(/* webpackChunkName: "group-foo" / './Foo.vue')
const Bar = () => import(/ webpackChunkName: "group-foo" / './Bar.vue')
const Baz = () => import(/ webpackChunkName: "group-foo" */ './Baz.vue')

  1. 在 router 文件中正常使用就可，使用 chunk name 來賦值 component
    const router = new VueRouter({
    routes: [
    { path: '/foo', component: Foo }，
    { path: '/bar', component: Bar }，
    { path: '/baz', component: Baz }
    ]
    })

復(fù)制代碼</pre>

一、搜索QQ群，前端學(xué)習(xí)交流群：1093606290

二、https://jq.qq.com/?_wv=1027&k=MlDBtuEG

三、

image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容