vue前端项目——创建多个页面并配置简单路由(02)

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建页面

1.1 页面内容

<template>
    <div>
        welcom to aaa page !
    </div>
</template>

1.2 路由配置

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/views/home.vue'
import Aaa from '@/components/views/aaa.vue'
import Bbb from '@/components/views/bbb.vue'

Vue.use(Router)

export default new Router({
  routes: [
    // eslint-disable-next-line spaced-comment
    /*{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },*/
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/a',
      name: 'Aaa',
      component: Aaa
    }, {
      path: '/b',
      name: 'Bbb',
      component: Bbb
    }
    // eslint-disable-next-line spaced-comment
    /*{
      path: '/b',
      name: 'Bbb',
      component: (resolve) => require(['@/pages/bbb.vue'], resolve)
    }*/
  ],
  mode: 'history'
})

1.3 其他配置/config/index.js

二、显示页面

2.1 对应初始化页面home.vue

2.2 对应页面aaa.vue

2.3 对应页面bbb.vue

三、简单错误问题解决

3.1 案例一

Newline required at end of file but not found.

3.2 案例二

Strings must use singlequote.

3.3 案例三

Missing space before function parentheses.

.eslintrc.js下新增配置 "space-before-function-paren": 0,

3.4 案例四

Unexpected trailing comma.

…

总结思考

前端总体编码规范方面在开发时需要去注意的。
其次具体页面就具体开发，当然路由拦截，代理，跨域等问题也需要去注意。