脚本宝典收集整理的这篇文章主要介绍了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写好，再把路由的导航挂上去

脚本宝典总结

以上是脚本宝典为你收集整理的vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（二）配置路由全部内容，希望文章能够帮你解决vue vue-router vuex element-ui axios 写一个代理平台的学习笔记（二）配置路由所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。