使用vue.js如何實(shí)現(xiàn)登錄控制？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)公司專注于揭東網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供揭東營(yíng)銷型網(wǎng)站建設(shè)，揭東網(wǎng)站制作、揭東網(wǎng)頁(yè)設(shè)計(jì)、揭東網(wǎng)站官網(wǎng)定制、微信小程序服務(wù)，打造揭東網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供揭東網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

登錄頁(yè)面和主頁(yè)面：

<template>
 <div class="login">
  <table width="100%" height="100%">
   <tr height="41"><td class="logintb" colspan="2"> </td></tr>
   <tr height="100%" class="loginbg">
    <td id="left_cont">
     <table width="100%" height="100%">
      <tr height="155"><td colspan="2"> </td></tr>
      <tr>
       <td width="20%" rowspan="2"> </td>
       <td width="60%">
        <table width="100%">
          <tr height="70"><td align="right"></td></tr>
          <tr height="274">
            <td valign="top" align="right">
              <img src="../../static/images/logo.png"/>
             </img/>
            </td>
          </tr>
        </table>
       </td>
       <td width="15%" rowspan="2"> </td>
      </tr>
      <tr><td colspan="2"> </td></tr>
     </table>
    </td>
    <td id="right_cont">
     <table height="100%">
      <tr height="30%"><td colspan="3"> </td></tr>
      <tr>
       <td width="30%" rowspan="5"> </td>
       <td valign="top" id="form">
          <table valign="top" width="50%">
            <tr><td colspan="2"><h5 >管理后臺(tái)</h5></td></tr>
            <tr><td>管理員：</td><td><input type="text" v-model.trim="username" value="" /></td></tr>
            <tr><td>密  碼：</td><td><input type="password" v-model.trim="pwd" value="" /></td></tr>
            <!-- <tr><td>驗(yàn)證碼：</td><td><input type="text" name="" value="" /></td></tr> -->
            <tr class="bt" align="center"><td> <input type="submit" @click="login" value="登陸" /></td><td> </td></tr>
          </table>
       </td>
       <td rowspan="5"> </td>
      </tr>
      <tr><td colspan="3"> </td></tr>
     </table>
    </td>
   </tr>
   <tr id="login_bot"><td colspan="2"><p>Copyright &copy; 2017-{{getNowDate()}} Tujiawang</p></td></tr>
  </table>
 </div>
</template>
<script>
 import axios from 'axios'
 axios.defaults.withCredentials = true
 export default{
  data(){
   return {
    username:'',
    pwd:''
   }
  },
  methods: {
   login() {
    var params = new URLSearchParams();
    params.append('username', this.username);
    params.append('password', this.pwd);
    axios.post(this.HOST+'/home/system/login',params).then(res => {
      if(res.data.code ==1){
       sessionStorage.username = this.username;
       this.$router.push({path:'/main'})
      }else{
       alert('登錄失敗')
      }
    })
   },
   getNowDate(){
    var d = new Date();
    return d.getFullYear();
   }
  }
 }
</script>

上面的登錄頁(yè)面注意：login方法中登錄成功需要寫入sessionStorage以便路由進(jìn)行判斷

最主要的是路由文件中的內(nèi)容：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    component: (resolve)=>{require(['../components/Login'],resolve)}
  },
  {
    path: '/main',
    name: 'main',
    component: (resolve)=>{require(['../components/Home'],resolve)},
    redirect: 'main/info',
    children: [{
        path: 'info',
        meta: {
          id:-1
        },
        component: (resolve)=>{require(['../components/Main'],resolve)}
      }
    ]
  },
  {
    path: '/vips',
    name: 'vips',
    component: (resolve)=>{require(['../components/Home'],resolve)},
    redirect: 'vips/list',
    children: [{
        path: 'list',
        meta: {
          id:0
        },
        component: (resolve)=>{require(['../components/VipsList'],resolve)}
      },
      {
        path: 'detail',
        meta: {
          id:0
        },
        component: (resolve)=>{require(['../components/VipsDetail'],resolve)}
      },
      {
        path: 'userlog',
        meta: {
          id:0
        },
        component: (resolve)=>{require(['../components/UserLog'],resolve)}
      }
    ]
  }
];
const router = new Router({
  routes
});
/**
 * to:表示目標(biāo)路由
 * from:表示來(lái)源路由
 * next:表示執(zhí)行下一步操作
 */
router.beforeEach((to, from, next) => {
  if (to.path === '/login') { // 當(dāng)路由為login時(shí)就直接下一步操作
    next();
  } else { // 否則就需要判斷
    if(sessionStorage.username){ // 如果有用戶名就進(jìn)行下一步操作
     next()
    }else{
     next({path: '/login'}) // 沒(méi)有用戶名就跳轉(zhuǎn)到login頁(yè)面
    }
  }
})
export default router

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

當(dāng)前文章：使用vue.js如何實(shí)現(xiàn)登錄控制
文章分享：http://aaarwkj.com/article40/jeeeeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、電子商務(wù)、網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)