路由設(shè)計(jì)

本則路由考慮驗(yàn)證進(jìn)入登錄頁(yè)面，完成登錄操作進(jìn)入首頁(yè)。

import Vue from "vue";

import Router from "vue-router";

Vue.use(Router);

import store from "@/store/store";

// (延遲加載)

const Login = () => import("@/views/login");

const Home = () => import("@/views/home");

const HomeRoute = {

 path: "/",

 name: "首頁(yè)",

 component: Home

};

export { HomeRoute };

const router = new Router({

 base: process.env.BASE_URL,

 routes: [

   {

     path: "/login",

     name: "登錄",

     component: Login

   },

   HomeRoute

 ]

});

router.beforeEach((to, from, next) => {

 let loginName = store.state.user.loginName;

 if (to.path === "/" && loginName == "") {

   next("/login");

 } else {

   next();

 }

});

export default router;

數(shù)據(jù)模型

const state = {

 loginName: ""

};

const mutations = {

 SET_LOGINNAME(state, loginName) {

   state.loginName = loginName;

 }

};

const actions = {

 login({ commit }, userInfo) {

   return new Promise((res, ret) => {

     commit("SET_LOGINNAME", userInfo);

     res();

   });

 },

 logout({ commit }) {

   return new Promise((res, ret) => {

     commit("SET_LOGINNAME", "");

     res();

   });

 }

};

export default {

 namespaced: true,

 state,

 mutations,

 actions

};

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

import user from "./modules/user";

const store = new Vuex.Store({

 modules: {

   user

 }

});

export default store;

組件

<div class="modify">

 <input

   type="text"

   @keydown.enter.prevent="handleKeydown"

   v-model="currentVal"

   placeholder="使用enter鍵切換頻道"

 />

 <button @click="reset" style="margin-left:5px;outline:none;cursor:pointer;">復(fù)位</button>

</div>

import { mapState, mapMutations, mapActions } from "vuex";

export default {

 name: "login",

 data() {

   return {

     currentVal: "",

     list: ["咨詢服務(wù)", "音悅臺(tái)", "體育臺(tái)", "財(cái)經(jīng)頻道", "時(shí)尚資訊"],

     index: 0

   };

 },

 computed: {

   ...mapState({

     loginName: state => state.user.loginName

   })

 },

 methods: {

   ...mapActions({

     login: "user/login"

   }),

   handleToHome() {

     let userInfo = "user";

     this.login(userInfo);

     this.$router.push({

       path: "/"

     });

   },