Vue 出一個女友吧!-Admin Page

發表於 2019-07-25 分類於 Vue

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

這一篇將會講到 Route 的部分，順便也會講到 Admin Page

前言

這一篇將會講到 Route 的部分，順便也會講到 Admin Page

起手式

這邊我就快速搭建一下後台 UI，我這邊使用的是網路上的資源

我會使用 SB Admin 2 的登入頁面

SB Admin 2

還有的後臺則會使用 Bootstrap dashboard

Bootstrap dashboard

由於我使用的是 PUG 所以這邊先用一個 Login 作為一個範例，先新增一個 Login.vue 放在 Views，然後內容如下

<template lang="pug">
.container
  .row.justify-content-center
    .col-xl-10.col-lg-12.col-md-9
      .card.o-hidden.border-0.shadow-lg.my-5
        .card-body.p-0
          .row
            .col-lg-6.d-none.d-lg-block.bg-login-image
            .col-lg-6
              .p-5
                .text-center
                  h1.h4.text-gray-900.mb-4 Welcome Back!
                form.user
                  .form-group
                    input#exampleInputEmail.form-control.form-control-user(type='email', aria-describedby='emailHelp', placeholder='Enter Email Address...')
                  .form-group
                    input#exampleInputPassword.form-control.form-control-user(type='password', placeholder='Password')
                  .form-group
                    .custom-control.custom-checkbox.small
                      input#customCheck.custom-control-input(type='checkbox')
                      label.custom-control-label(for='customCheck') Remember Me
                  a.btn.btn-primary.btn-user.btn-block(href='index.html') Login
                  hr
                  a.btn.btn-google.btn-user.btn-block(href='index.html')
                    i.fab.fa-google.fa-fw
                    |  Login with Google
                  a.btn.btn-facebook.btn-user.btn-block(href='index.html')
                    i.fab.fa-facebook-f.fa-fw
                    |  Login with Facebook
                hr
                .text-center
                  a.small(href='forgot-password.html') Forgot Password?
                .text-center
                  a.small(href='register.html') Create an Account!
</template>

我們已經新增了一個模板，但是你不管怎麼在瀏覽器輸入 http://localhost:8080/#/login 都是無法看到畫面，那是因為我們還沒針對 Route 做調整

首先打開 router.js，然後在下方填入

{
  path: '/login',
  name: 'login',
  component: () => import('./views/Login.vue'),
},

path - Router 路徑
name - router 名稱
component - 引入的元件

我個人是偏好直接在 component 上 import，另一種引入的方式如下

import Login from './views/Login.vue';

{
  path: '/login',
  name: 'login',
  component: Login,
},

接下來你就可以成功看到畫面出現哩

登入畫面

Dashboard

Dashboard 部分是使用 Bootstrap dashboard，所以樣板就直接引入，但是這個版型有自己的 css 樣式，所以需要新增一個 Dashboard.scss 檔案，然後將客製化的 CSS 丟進去

客製化 CSS

所以 all.scss 裡面就會多加載一個 Dashboard.scss，如果沒有問題的話，就可以看到畫面哩

Dashboard

這邊一樣要記得修改 router，這邊就不多述怎麼改囉

接下來是將左邊的內容通通刪除，右邊與上方選單則是元件化

元件化

所以目前 Dashboard 是像這樣子空的

Dashboard

那麼我們就要將原本的元件給引入並且插入模板內

元件引入模板

結果當然也是一樣沒有變化的

Dashboard

但是 main 裡面會再插入一行，也就是 router-view

router-view

接下再一個元件在 components/admin 並且叫做 Products.vue 內容隨意

然後這邊打開 router.js，由於這邊我們會使用的叫做巢狀 router，因為他只會在 dashboard 下切換，所以會使用到一個方法叫做 children，寫法如下

{
  path: '/admin',
  name: 'admin',
  component: () => import('./views/admin/Dashboard.vue'),
  children: [
    {
      path: '/admin',
      name: 'admin',
      component: () => import('./components/admin/Products.vue'),
    },
  ],
},

這樣子預設就可以看到這個元件囉

children