vue vue-router vuex element-ui axios 寫一個代理平臺的學習筆記（二）配置路由

組件規劃和寫路由結構

預想中要實現的功能：

• 主頁 home

• 商品展現 products

• 使用幫助 FAQ

• 用戶操做 manger

  • 用戶信息 manger/my

  • 發貨管理 manger/send

  • 歷史發貨 manger/history

• 登陸 login

• 註冊 regin

• 固定頭部 header

• 底部 footer

實現思路，先建立好每一個組件

每一個組件的內容就像這樣

home.vue

<template>
  <h1>home</h1>
</template>

寫完後的結構

寫路由結構 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}
      ]
    }
  ]
})

而後能夠看看效果，是否是能正確切換路由

這樣看起來是沒有問題的，但實際上卻頗有問題

當咱們輸入地址：http://localhost:8080/#/home,會獲得這個結果

這樣明顯不對啊，對於不存在的頁面咱們應該給它重定向到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的時候就是這樣的

同時咱們訪問http://localhost:8080/#/manger或者http://localhost:8080/#/send、http://localhost:8080/#/history都是這樣的

manger下面的三個子頁面沒有顯示出來，要顯示的話咱們應該在manger.vue裏面渲染

manger.vue

<template>
  <div>
    <h1>manger</h1>
    <router-view></router-view>
  </div>
</template>

這樣就顯示齊全了

路由這樣就配置好了，下一步把header.vue寫好，再把路由的導航掛上去