四时宝库

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

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

manger.vue

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

这样就显示齐全了

Image 017.png

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