1. 程式人生 > >vue學習(四)登陸、註冊、首頁模板頁區分

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 等