vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（二）配置路由

Image 008.png

组件规划和写路由结构

预想中要实现的功能：

• 主页 home
• 商品展示 products
• 使用帮助 FAQ
• 用户操作 manger
  • 用户信息 manger/my
  • 发货管理 manger/send
  • 历史发货 manger/history
• 登录 login
• 注册 regin
• 固定头部 header
• 底部 footer

实现思路，先创建好每个组件

每个组件的内容就像这样

home.vue

写完后的结构

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

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

manger下面的三个子页面没有显示出来，要显示的话我们应该在manger.vue里面渲染

manger.vue

这样就显示齐全了

Image 017.png

路由这样就配置好了，下一步把header.vue写好，再把路由的导航挂上去