成品效果

首先進入首頁點選右下角個人中心，若狀態為登入中則進入個人中心頁面，否則進入登入頁

實現步驟

首先完成靜態的登入頁與個人中心頁面

登入頁

<template>
    <div class="login-bg">
        <div class="anjian">
        <div class="headerLeft">
            <svg class="icon" aria-hidden="true" @click="$router.push('/')">
                <
 
use xlink:href="#icon-fanhui"></use>
            </svg>
            <span>登入</span>
        </div>
</div>
        <div class="login-contain">
            <div class="login-header">
                <p><img src="../assets/img/login_01.png" alt=""></
 
p>
            </div>
            <div class="form-group">
                <div class="form-item">
                    <label for="username">
                        <img src="../assets/img/login_02.png" alt="">
                    </label>
                    <input 
 
type="text" v-model="phone" id="username" placeholder="使用者名稱/手機號碼">
                </div>
                <div class="form-item">
                    <label for="password">
                        <img src="../assets/img/login_03.png" alt="">
                    </label>
                    <input type="password" v-model="password" id="password" placeholder="請輸入密碼">
                </div>
            </div>
            <div class="button-group">
                <button class="login-btn" id="doLogin" @click="loginEvent">登入</button>
            </div>
            <div class="order-login">
                <p class="order-login-line">其他登入方式</p>
            </div>
        </div>
    </div>
</template>

個人中心頁

<template>
    <div class="top">
        <div class="topLeft" @click="$router.go(-1)">
            <svg class="icon_1" aria-hidden="true">
                <use xlink:href="#icon-back1"> </use>
            </svg>
        </div>
        個人中心</div>
    <div class="black">
        <span>歡迎您id號為<p style="color:yellow">{{$store.state.user.account}}</p>的使用者</span>

    </div>
    <div class="List">
        <ul>
            <li>我的訂單</li>
            <li>我的錢包</li>
            <li>我的收藏</li>
        </ul>
    </div>
    <div class="list_1">
        <ul>
            <li><span>歷史記錄</span></li>
            <li><span>地址管理</span></li>
            <li><span>修改資料</span></li>
        </ul>
    </div>
    <div class="list_1">
        <ul>
            <li><span>邀請好友</span></li>
            <li><span>意見反饋</span></li>
            <li><span>設定</span></li>
        </ul>
    </div>
    <div class="list_2">
        <span>清除快取</span>
    </div>
    <div class="a"></div>
    <!--&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#455;-->
    <div>
    </div>
    <div class="iconList">
    <div class="iconItem" @click="$router.push('/')">
      <svg class="icon active1" aria-hidden="trun">
        <use xlink:href="#icon-zhuye"></use>
      </svg>
      <span class="active1">主頁</span>
    </div>
    <div class="iconItem" @click="$router.push('/classifyview/:id')">
      <svg class="icon" aria-hidden="trun">
        <use xlink:href="#icon-yingyong"></use>
      </svg>
      <span>分類</span>
    </div>
    <div class="iconItem" @click="$router.push('/search')">
      <svg class="icon" aria-hidden="trun">
        <use xlink:href="#icon-faxian"></use>
      </svg>
      <span>發現</span>
    </div>
    <div class="iconItem">
      <svg class="icon" aria-hidden="trun">
        <use xlink:href="#icon-gouwuche"></use>
      </svg>
      <span>購物車</span>
    </div>
    <div class="iconItem"  @click="$router.push('/me')">
      <svg class="icon" aria-hidden="trun">
        <use xlink:href="#icon-geren" class='active2'></use>
      </svg>
      <span class='active2'>個人中心</span>
    </div>
  </div>
</template>

配置路由介面

路由介面判斷登入狀態

於store/index.js中建立登入狀態方法

登入頁向狀態管理庫傳送資料