按照上面文章配置完畢後,會發現有個問題,我登陸頁面、註冊頁面是不需要視圖頁的。
開始配置路由
重新配置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 等