在當(dāng)前的網(wǎng)頁設(shè)計(jì)中，當(dāng)我們點(diǎn)擊一個(gè)導(dǎo)航欄的鏈接，頁面會(huì)重新加載來呈現(xiàn)新的內(nèi)容。這樣做的問題在于它會(huì)影響到用戶的體驗(yàn)，且加載頁面的時(shí)間較長。VueJS提供了一種更好的方式來解決這個(gè)問題，即使用SPA (單頁應(yīng)用)。Vue左側(cè)圖標(biāo)導(dǎo)航是一種常見的SPA菜單設(shè)計(jì)，可以讓用戶在網(wǎng)頁上瀏覽多個(gè)內(nèi)容，而不用重新加載頁面。

<template>
<div class="app">
<div class="sidebar">
<img src="./assets/logo.png" alt="logo" />
<ul>
<li v-for="(link, index) in links" :key="index">
<router-link :to="link.url" :title="link.title">
<i :class="link.icon"></i>
{{ link.title }}
</router-link>
</li>
</ul>
</div>
<div class="content">
<router-view />
</div>
</div>
</template>

在Vue的左側(cè)圖標(biāo)導(dǎo)航中，最常見的設(shè)計(jì)是使用Vue-Router插件來管理路由。路由控制著頁面的切換，當(dāng)用戶點(diǎn)擊導(dǎo)航菜單中的頁面鏈接時(shí)會(huì)觸發(fā)路由切換。在上述的代碼中，我們可以看到“router-link”組件，它用來創(chuàng)建一個(gè)鏈接，并且會(huì)現(xiàn)在browser url 中修改當(dāng)前路徑。另一個(gè)主要的組件“router-view”用于渲染當(dāng)前路徑對應(yīng)的組件模板。換言之，當(dāng)路由變化時(shí)，Vue會(huì)自動(dòng)更新并渲染新組件，而不用重新加載整個(gè)頁面。

在使用Vue-Router插件時(shí)，我們需要定義路由的映射關(guān)系。例如，我們可以通過路由來映射到相應(yīng)的組件，這樣我們只需要在底部出現(xiàn)一次，然后根據(jù)不同頁面的請求來切換組件。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
}
]
})
export default router

在定義了路由之后，我們需要將其導(dǎo)入到我們的應(yīng)用中，并將其注冊到Vue實(shí)例中。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h =>h(App),
}).$mount('#app')

這樣，我們便可以在我們的應(yīng)用中使用上述路由以實(shí)現(xiàn)Vue的左側(cè)圖標(biāo)導(dǎo)航。該設(shè)計(jì)讓用戶感到從一個(gè)頁面移到另一個(gè)頁面時(shí)非常流暢，不需要等待整個(gè)頁面重新加載，大大提高了用戶的體驗(yàn)。