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 等