vue学习（四）登陆、注册、首页模板页区分

按照上面文章配置完毕后，会发现有个问题，我登陆页面、注册页面是不需要视图页的。

开始配置路由

重新配置main.js

引入

import App from './App'  //引入vue组件

更改启动项

new Vue({
  el: '#app',
  router: Router,
  components: { App },
  template: '<App/>'
})

改为APP启动

配置router/index.js

先引入视图页和404页

//布局模板页
import Layouts from "../components/layout/Layout";
import NotFoundView from '../components/404'

更改路由

export default new Router({
  routes: [
    {
      path: '/login',
      component: Login
    },
    // ...person,
    // // 404,500 错误页面
    // ...error,
    {
      path: '/',
      component: Layouts,
      children: [
        {
          path: '/index',
          alias: '',
          component: Index,
          name: 'Index',
          meta: { description: 'Overview of environment' }
        }
      ]
    }, {
      // not found handler
      path: '*',
      component: NotFoundView
    }
  ],
  mode: "history"//干掉地址栏里边的#号键
})

思路就是把需要视图页的页面，把它们放在视图页下的子路由

404.vue 页面自定义

// ...user,
// 404,500 错误页面
// ...error,

上面代码的意思，为了简洁我把一个功能的路由都配置在了一个文件  比如 user.js 等