Image 008.png
組件規劃和寫路由結構
預想中要實現的功能：
- 主頁 home
- 商品展示 products
- 使用幫助 FAQ
- 用戶操作 manger
- 用戶信息 manger/my
- 發貨管理 manger/send
- 歷史發貨 manger/history
- 登錄 login
- 注冊 regin
- 固定頭部 header
- 底部 footer
實現思路，先創建好每個組件
每個組件的內容就像這樣
home.vue
<template>
<h1>home</h1>
</template>
寫完后的結構
Image 009.png
寫路由結構 router/index.js
打開router/index.js
編寫代碼：
import Vue from 'vue'
import Router from 'vue-router'
// 引入組件
import Home from '@/components/home'
import Login from '@/components/login'
import Regin from '@/components/regin'
import Products from '@/components/page/products'
import FAQ from '@/components/page/FAQ'
import Manger from '@/components/page/manger'
import My from '@/components/page/manger/my'
import Send from '@/components/page/manger/send'
import MyHistory from '@/components/page/manger/history'
Vue.use(Router)
export default new Router({
// 配置路由
routes: [
{
path: '/',
name: '首頁',
component: Home
},
{
path: '/login',
name: '',
hidden: true,
component: Login
},
{
path: '/regin',
name: '',
hidden: true,
component: Regin
},
{
path: '/products',
name: '商品',
component: Products
},
{
path: '/FAQ',
name: 'FAQ使用文檔',
component: FAQ
},
{
path: '/manger',
name: '我的工作臺',
redirect: '/manger/my',
component: Manger,
hasChild: true,
children: [
{path: '/manger/my', name: '我的信息', component: My},
{path: '/manger/send', name: '發貨管理', component: Send},
{path: '/manger/history', name: '發貨記錄', component: MyHistory}
]
}
]
})
然后可以看看效果，是不是能正確切換路由
Image 010.png
Image 011.png
Image 012.png
這樣看起來是沒有問題的，但實際上卻很有問題
當我們輸入地址：http://localhost:8080/#/home,會得到這個結果
Image 013.png
這樣明顯不對啊，對于不存在的頁面我們應該給它重定向到404，所以應該加個404.vue
404.vue
<template>
<h1>404 NOT FOUND</h1>
</template>
<style scoped>
h1 {
font-size: 100px;
}
</style>
router/index.js 添加
import Page404 from '@/components/404'
{
path: '*',
hidden: true,
component: Page404
}
這樣我們訪問http://localhost:8080/#/home，或者http://localhost:8080/#/xxxxxxx的時候就是這樣的
Image 014.png
同時我們訪問http://localhost:8080/#/manger或者http://localhost:8080/#/send、http://localhost:8080/#/history都是這樣的
![]()
Image 015.png
Image 015.png
manger下面的三個子頁面沒有顯示出來，要顯示的話我們應該在manger.vue里面渲染
manger.vue
<template>
<div>
<h1>manger</h1>
<router-view></router-view>
</div>
</template>
這樣就顯示齊全了
Image 017.png
