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 等

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章