假設(shè)您創(chuàng)建了一個博客。您希望主頁沒有側(cè)欄，而所有其他頁面都有側(cè)欄。
使用?vue-cli 3?創(chuàng)建一個項(xiàng)目：
vue create blog
創(chuàng)建 layouts 文件夾這 src。
創(chuàng)建有邊欄的 Default 模版。
創(chuàng)建沒有邊欄的 NOSidebar 模版：
然后在 router.js 里創(chuàng)建頁面：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from './pages/Home'
import About from './pages/About'
const routes = [
? ? {
? ? ? ? path: '/',
? ? ? ? name: 'home',
? ? ? ? meta: {
? ? ? ? ? ? layout: 'no-sidebar'
? ? ? ? },
? ? ? ? component: Home
? ? },
? ? {
? ? ? ? path: '/about',
? ? ? ? name: 'about',
? ? ? ? meta: {
? ? ? ? ? ? layout: 'default'
? ? ? ? },
? ? ? ? component: About
? ? },
]
const router = new VueRouter({
? ? mode: 'history',
? ? routes
})
export default router
我為Home & About頁面添加了一個meta鍵 在Vue-router中。
現(xiàn)在我們在 main.js 導(dǎo)入 layout
