Vue登入頁面

2022-01-11 15:07:42 字數 2175 閱讀 7180

調整專案目錄結構如下

其中 src\store\index.js

import vue from 'vue'


import vuex from 'vuex'


import state from './state'


import mutations from './mutations'


import actions from './actions'


import user from "./module/user";


vue.use(vuex)


export default new vuex.store(


})
src\store\module\user.js

const state = 


const mutation = 


const action = 


export default
src\router\router.js

export default [


"path: '/',


name: 'login',    // 路由名稱


// route level code-splitting


// this generates a separate chunk (about.[hash].js) for this route


// which is lazy-loaded when the route is visited.


component: () => import(/* webpackchunkname: "about" */ '../views/login/login')},,


,]}]
在 src\router\index.js 中配置路由

import vue from 'vue'


import router from 'vue-router'


import routes from "./router";


vue.use(router)


export default new router()
在  src\views 目錄下新建  login 目錄及此目錄下新建檔案  login.vue寫入如下內容

登入


-->
訪問login

上面我們只是實現了登入的form表單，但是沒有驗證資料輸入的合法性，比如空，或者長度

elementui提供給了我們校驗的方法

form 元件提供了表單驗證的功能，只需要通過rules屬性傳入約定的驗證規則，並將 form-item 的prop屬性設定為需校驗的欄位名即可

校驗規則：

修改 src/views/login/login.vue裡的**

:rules="loginrules" :model="form" label-width="80px" class="login-form">


prop="username">


prop="password">


@click="submitform('form')">登入
在第三行加上 :rules="loginrules"    指定使用哪個校驗規則

第五行和第八行加上 prop="username" 後面的屬性值自定義，更改39行到47行，

第十三行改為 @click="submitform('form')"，submitform就是method的方法名。後面的form是第三行的ref屬性。

,   表示當滑鼠失去焦點後驗證，必填，如果為空則提示message裡的資訊

表示當滑鼠失去焦點後驗證，最小為3位，最大為10位，如果不滿足則提示message裡的資訊

執行

VUE登入頁面的開發

官方文件 npm install axios 登入 註冊import register from views register.vue import login from views login.vue 根目錄預設跳轉到login routes import cube ui import axios...

使用Vue寫乙個登入頁面

為了不浪費大家時間，所以我把這段話放在了開頭。上一部落格講到構建了乙個vue專案，現在在那個專案之上實現乙個登入頁面。因為用到了element ui元件，所以需要先安裝element ui元件，進入專案根目錄後 執行cnpm i element ui構建專案的目錄 自己寫的樣式 import sty...

vue限制不登入無法進入其他頁面

vue限制不登入，通過url進入其他頁面強制回到登入頁面 已經登入了，不可以再進入登入介面 先在router下的index.js新增meta 如下 然後在main.js新增如下 router.beforeeach to,from next else else else 如果本地 存在 token 則...