您的当前位置:首页怎样使用vuerouter+vuex实现首页登录验证判断

怎样使用vuerouter+vuex实现首页登录验证判断

2023-11-30 来源:热乐宠物网

这次给大家带来怎样使用vue router+vuex实现首页登录验证判断,使用vue router+vuex实现首页登录验证判断的注意事项有哪些,下面就是实战案例,一起来看一下。

1.vue router

路由判断首先我们想到的是router.beforeEach 前置导航守卫 ,这个方法接受三个参数 to from next 。

to参数为即将跳转的路由路径,from为当前导航正要离开的路由,next方法用来resolve这个钩子。

下面以工作中写的一个判断为为例子:

router.beforeEach(async (to, from, next) => { const { name, meta } = to; const { requireLogin } = meta; if (name === 'login') { // 如果是登录页则用next方法resolve掉这个钩子,如果不是,进行到下一个判断 return next(); } const needLogin = requireLogin && !store.getters.user.isLogin; // 从store中读取是否获取了已登录的信息 if (needLogin) { return next({ // 如果没有则跳转到登录页,将当前路由路径放到参数中 name: 'login', params: { back: to }, }); } return next(); });

2. this.$router 与 this.$route this.$router.push 与 this.$router.replace

在登录页完成登录请求后进行下面的操作

获取路径中存放前一个路径的参数 ,然后跳转到该页面

 loginSuccess() { const { params: { back } } = this.$route; const route = back || { name: 'home' }; const { name, params, query } = route; this.$router.replace({ name, params, query }); },

在上面这段代码中出现了两个我们经常混淆的概念:

我们知道this.$router是router实例,可以用来直接访问路由。我们称router配置中每一个对象为一个路由记录,this.$route是暴露出来用来访问每个路由记录的。因此我们获取参数时使用的是this.$route 跳转路由时使用的是道this.$router。

上端代码中我们使用了replace而不是push来跳转路由,这两者的区别是会不会在history中产生记录。replace不会新增记录,而是直接替换掉了这条路由记录。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

应该如何搭建webpack+react开发环境

怎样使用JS实现调用本地摄像头

小编还为您整理了以下内容,可能对您也有帮助:

Vue项目中用户登录及token验证及流程图

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

简单举例说明:

① 调登录接口成功,在回调函数中将token存储到localStorage和vuex中(login.vue中)

② store文件夹下的index.js

③ 路由守卫(router文件夹下的index.js)

④ 请求头加token

⑤ 如果前端拿到状态码为401,就清除token信息并跳转到登录页面

流程图:

Vue项目中用户登录及token验证及流程图

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

简单举例说明:

① 调登录接口成功,在回调函数中将token存储到localStorage和vuex中(login.vue中)

② store文件夹下的index.js

③ 路由守卫(router文件夹下的index.js)

④ 请求头加token

⑤ 如果前端拿到状态码为401,就清除token信息并跳转到登录页面

流程图:

vue实现登陆注册功能(小白篇)

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码

2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token

3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面

4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面

5、每次调后端接口,都要在请求头中加token

6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401

7、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

vue-cli搭建一个项目,简单说明前端要做的事:

一、调登录接口成功,在回调函数中将token存储到localStorage和vuex中

login.vue

<template>

  <div>

    <input type="text" v-model="loginForm.username" placeholder="用户名"/>

    <input type="text" v-model="loginForm.password" placeholder="密码"/>

    <button @click="login">登录</button>

  </div>

</template>

<script>

import { mapMutations } from 'vuex';

export default {

  data () {

    return {

      loginForm: {

        username: '',

        password: ''

      }

    };

  },

  methods: {

    ...mapMutations(['changeLogin']),

    login () {

      let _this = this;

      if (this.loginForm.username === '' || this.loginForm.password === '') {

        alert('账号或密码不能为空');

      } else {

        this.axios({

          method: 'post',

          url: '/user/login',

          data: _this.loginForm

        }).then(res => {

          console.log(res.data);

          _this.userToken = 'Bearer ' + res.data.data.body.token;

          // 将用户token保存到vuex中

          _this.changeLogin({ Authorization: _this.userToken });

          _this.$router.push('/home');

          alert('登陆成功');

        }).catch(error => {

          alert('账号或密码错误');

          console.log(error);

        });

      }

    }

  }

}

</script>

store文件夹下的index.js

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({

  state: {

    // 存储token

    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''

  },

  mutations: {

    // 修改token,并将token存入localStorage

    changeLogin (state, user) {

      state.Authorization = user.Authorization;

      localStorage.setItem('Authorization', user.Authorization);

    }

  }

});

export default store;

二、路由导航守卫

 router文件夹下的index.js

import Vue from 'vue';

import Router from 'vue-router';

import login from '@/components/login';

import home from '@/components/home';

Vue.use(Router);

const router = new Router({

  routes: [

    {

      path: '/',

      redirect: '/login'

    },

    {

      path: '/login',

      name: 'login',

      component: login

    },

    {

      path: '/home',

      name: 'home',

      component: home

    }

  ]

});

// 导航守卫

// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆

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

  if (to.path === '/login') {

    next();

  } else {

    let token = localStorage.getItem('Authorization');

    if (token === 'null' || token === '') {

      next('/login');

    } else {

      next();

    }

  }

});

export default router;

三、请求头加token

// 添加请求*,在请求头中加token

axios.interceptors.request.use(

  config => {

    if (localStorage.getItem('Authorization')) {

      config.headers.Authorization = localStorage.getItem('Authorization');

    }

    return config;

  },

  error => {

    return Promise.reject(error);

  });

四、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

        localStorage.removeItem('Authorization');

        this.$router.push('/login');

vue实现登陆注册功能(小白篇)

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:

1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码

2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token

3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面

4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面

5、每次调后端接口,都要在请求头中加token

6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)就返回401,请求头中没有token也返回401

7、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

vue-cli搭建一个项目,简单说明前端要做的事:

一、调登录接口成功,在回调函数中将token存储到localStorage和vuex中

login.vue

<template>

  <div>

    <input type="text" v-model="loginForm.username" placeholder="用户名"/>

    <input type="text" v-model="loginForm.password" placeholder="密码"/>

    <button @click="login">登录</button>

  </div>

</template>

<script>

import { mapMutations } from 'vuex';

export default {

  data () {

    return {

      loginForm: {

        username: '',

        password: ''

      }

    };

  },

  methods: {

    ...mapMutations(['changeLogin']),

    login () {

      let _this = this;

      if (this.loginForm.username === '' || this.loginForm.password === '') {

        alert('账号或密码不能为空');

      } else {

        this.axios({

          method: 'post',

          url: '/user/login',

          data: _this.loginForm

        }).then(res => {

          console.log(res.data);

          _this.userToken = 'Bearer ' + res.data.data.body.token;

          // 将用户token保存到vuex中

          _this.changeLogin({ Authorization: _this.userToken });

          _this.$router.push('/home');

          alert('登陆成功');

        }).catch(error => {

          alert('账号或密码错误');

          console.log(error);

        });

      }

    }

  }

}

</script>

store文件夹下的index.js

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({

  state: {

    // 存储token

    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''

  },

  mutations: {

    // 修改token,并将token存入localStorage

    changeLogin (state, user) {

      state.Authorization = user.Authorization;

      localStorage.setItem('Authorization', user.Authorization);

    }

  }

});

export default store;

二、路由导航守卫

 router文件夹下的index.js

import Vue from 'vue';

import Router from 'vue-router';

import login from '@/components/login';

import home from '@/components/home';

Vue.use(Router);

const router = new Router({

  routes: [

    {

      path: '/',

      redirect: '/login'

    },

    {

      path: '/login',

      name: 'login',

      component: login

    },

    {

      path: '/home',

      name: 'home',

      component: home

    }

  ]

});

// 导航守卫

// 使用 router.beforeEach 注册一个全局前置守卫,判断用户是否登陆

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

  if (to.path === '/login') {

    next();

  } else {

    let token = localStorage.getItem('Authorization');

    if (token === 'null' || token === '') {

      next('/login');

    } else {

      next();

    }

  }

});

export default router;

三、请求头加token

// 添加请求*,在请求头中加token

axios.interceptors.request.use(

  config => {

    if (localStorage.getItem('Authorization')) {

      config.headers.Authorization = localStorage.getItem('Authorization');

    }

    return config;

  },

  error => {

    return Promise.reject(error);

  });

四、如果前端拿到状态码为401,就清除token信息并跳转到登录页面

        localStorage.removeItem('Authorization');

        this.$router.push('/login');

如何在vue中实现路由跳转判断用户权限功能

实现这类校验有几个步骤。

1、设置路由是否需要校验的阀值。

// 路由配置的地方谁知阀值

routes:[

{

name:'admin',

path:'/admin',

component:'...,

meta:{

auth: true // 这里设置,当前路由需要校验

}

}

]

2、设置保存登陆态信息。

// store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

let moles = {

// 自己的模块代码 其它代码就不写了。。同vuex模块

state:{ authorizd:true },

getters:{

authorizd: state => state.authorizd

},

actions: {

login({commit},payload){

// ajax 登陆流程,

commit("login", 登陆信息)

}

},

mutations:{

login(state,loginInfo){

state.authorizd = loginInfo // 假定登陆成功后,设置 state.

}

}

}

export default new Vuex.Store({

moles: moles

})

3、路由跳转,校验

// 路由入口钩子函数

import store from 'store'

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

if(to.matched.some( m => m.meta.auth)){

// 对路由进行验证

if(store.getters.authorizd) { // 已经登陆

next()

}else{

// 未登录,跳转到登陆页面,并且带上 将要去的地址,方便登陆后跳转。

next({path:'/login',query:{ referrer: to.fullPath} })

}

}else{

next()

}

})

上面代码是伪代码,主要是讲思路。。不要按部就班。。重在理解。

前后端分离项目——登录Token校验思路

对token的校验分为前端和后端

前端: Vue-Cli 2.x + axios
后端:SpringBoot 2.3.4

这里的话,userToken和userId放到sessionStorage是关键步骤

后端主要是使用*来进行请求的拦截和校验

解释一下思路:

这里的话,针对需要拦截的路径和需要放行的路径进行配置就行
关于redisTemple的引入这里就不再赘述。
到这里为止,前后端的token就都做完了,后面就再讲讲前端的一些其他思路吧
对于登录状态的判断,前端可以在router.foreach上对路由进行状态判定,从而实现页面程度的拦截(具体可以参考最后的参考文章2)

在使用*后,会发现前端部分请求会无法正常到达后端,百度后发现是因为 axios发送正式请求前会先发送一个嗅探请求 ,而嗅探请求是不携带我们封装的header的,所以会导致部分请求会无法成功,解决的方式有很多种,这里的话是选择了在后端去直接处理

参考文章
1、SpringBoot加了*后出现的跨域问题解析
https://blog.csdn.net/mrkorbin/article/details/104066979
2、Vue项目中实现用户登录及token验证
https://www.cnblogs.com/web-record/p/9876916.html

前后端分离项目——登录Token校验思路

对token的校验分为前端和后端

前端: Vue-Cli 2.x + axios
后端:SpringBoot 2.3.4

这里的话,userToken和userId放到sessionStorage是关键步骤

后端主要是使用*来进行请求的拦截和校验

解释一下思路:

这里的话,针对需要拦截的路径和需要放行的路径进行配置就行
关于redisTemple的引入这里就不再赘述。
到这里为止,前后端的token就都做完了,后面就再讲讲前端的一些其他思路吧
对于登录状态的判断,前端可以在router.foreach上对路由进行状态判定,从而实现页面程度的拦截(具体可以参考最后的参考文章2)

在使用*后,会发现前端部分请求会无法正常到达后端,百度后发现是因为 axios发送正式请求前会先发送一个嗅探请求 ,而嗅探请求是不携带我们封装的header的,所以会导致部分请求会无法成功,解决的方式有很多种,这里的话是选择了在后端去直接处理

参考文章
1、SpringBoot加了*后出现的跨域问题解析
https://blog.csdn.net/mrkorbin/article/details/104066979
2、Vue项目中实现用户登录及token验证
https://www.cnblogs.com/web-record/p/9876916.html

VUE中从数据库拿到的数据怎么实现登录

如何使用Vue将从数据库中获取的数据用于实现登录?

在Vue中,我们经常需要从数据库中获取数据,用于解决前端工作中的各种需求。其中一个常见的需求是实现一个登录功能,这个功能需要从后台获取用户输入的用户名和密码,并进行验证,如果验证通过,则允许用户登录进入系统,否则将提示用户重新输入用户名和密码。下面,我们将介绍如何使用Vue从数据库中获取数据实现这个登录功能。

首先,我们需要在Vue组件中创建一个表单,用于让用户输入用户名和密码:

创建登录表单

在Vue中创建登录表单非常简单,只需要使用v-model指令绑定用户输入的值,并在表单中添加一个按钮来触发登录事件即可。

```html

用户名:

密码:

登录

export default {

data() {

return {

username: \"\",

password: \"\",

};

},

methods: {

login() {

// TODO: 登录操作

},

},

};

```

注意,这里我们使用了v-model指令来绑定用户输入的值,这使得我们可以很方便地获取到用户输入的内容,并将其用于后续的登录操作。

接下来,我们需要在Vue组件中实现登录功能。在这里,我们假设后台API已经实现了一个/login接口,该接口接收用户名和密码,并进行验证。如果验证通过,则返回一个JWT令牌,否则返回一个错误消息。我们需要使用Vue的axios库来向后台发送登录请求,并处理返回结果:

实现登录功能

实现登录功能需要使用到Vue的axios库,我们需要在Vue组件中导入该库,并使用它向后台发送登录请求。

```html

import axios from \"axios\";

export default {

data() {

return {

username: \"\",

password: \"\",

};

},

methods: {

async login() {

try {

const response = await axios.post(\"/login\", {

username: this.username,

password: this.password,

});

const token = response.data.token;

console.log(`登录成功,token=${token}`);

// TODO: 登录成功操作

} catch (error) {

console.error(`登录失败,错误消息=${error}`);

// TODO: 登录失败操作

}

},

},

};

```

注意,这里我们使用了async/await语法来实现异步登录请求,并使用try/catch语句块来处理异步请求的错误。如果登录请求成功,我们会得到一个包含JWT令牌的响应,我们可以将该令牌存储在本地,以便后续使用。

最后,我们需要在Vue组件中实现登录成功和失败时的操作。如果登录成功,我们可以将JWT令牌存储在浏览器的localStorage中,并跳转到系统首页。如果登录失败,则应该向用户显示一个错误消息,并提示其重新输入用户名和密码。下面是完整的Vue组件代码:

完整的Vue组件代码

下面是完整的Vue组件代码。注意,这里我们使用了vue-router库来进行页面跳转操作。

```html

用户名:

密码:

登录

import axios from \"axios\";

import router from \"@/router\";

export default {

data() {

return {

username: \"\",

password: \"\",

};

},

methods: {

async login() {

try {

const response = await axios.post(\"/login\", {

username: this.username,

password: this.password,

});

const token = response.data.token;

console.log(`登录成功,token=${token}`);

localStorage.setItem(\"token\", token);

router.push(\"/home\");

} catch (error) {

console.error(`登录失败,错误消息=${error}`);

alert(\"登录失败,请重新输入用户名和密码\");

this.username = \"\";

this.password = \"\";

}

},

},

};

```

在这个Vue组件中,我们成功实现了从数据库中获取数据,用于实现登录功能。通过使用v-model指令绑定表单元素的值,使用axios库向后台发送登录请求,并使用vue-router库进行页面跳转操作,我们成功地实现了一个基于Vue的登录功能。

21《Vue 入门教程》VueRouter 基础使用

本小节我们介绍如何在 Vue 项目中使用 VueRouter。包括 VueRouter 的下载、什么是 VueRouter、如何使用 VueRouter 配置一个单页应用。其中,学习使用 VueRouter 配置一个单页应用是本节的重点。同学们在学完本节课程之后需要自己多尝试配置路由。

我们可以在官网 (VueRouter) 上直接下载 VueRouter 。 在 Vue 之后引入 VueRouter 会进行自动安装:

在一个模块化的打包系统中,您必须显式地通过 Vue.use () 来安装 Vuex:

在本章节的 VueRouter 学习中,我们都将使用 CDN 的方式引入路由。

用 Vue.js + VueRouter 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 VueRouter 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 VueRouter 在哪里渲染它们。 在使用 VueRouter 之前,我们需要先了解 VueRouter 的两个内置组件:

接下来我们看一个基本例子:

实例演示

"运行案例" 可查看在线运行效果

代码解释: HTML 代码第 12-13 行,我们定义了两个跳转链接; HTML 代码第 15 行,我们使用 组件来渲染匹配组件; JS 代码第 5-7 行,我们定义了组件 Index; JS 代码第 9-11 行,我们定义了组件 Article; JS 代码第 13-16 行,我们定义了路由数组:

JS 代码第 18-20 行,创建 router 实例,然后传 routes 配置。 JS 代码第 24 行,通过 router 配置参数注入路由。

本节,我们带大家学习了 VueRouter。主要知识点有以下几点:

21《Vue 入门教程》VueRouter 基础使用

本小节我们介绍如何在 Vue 项目中使用 VueRouter。包括 VueRouter 的下载、什么是 VueRouter、如何使用 VueRouter 配置一个单页应用。其中,学习使用 VueRouter 配置一个单页应用是本节的重点。同学们在学完本节课程之后需要自己多尝试配置路由。

我们可以在官网 (VueRouter) 上直接下载 VueRouter 。 在 Vue 之后引入 VueRouter 会进行自动安装:

在一个模块化的打包系统中,您必须显式地通过 Vue.use () 来安装 Vuex:

在本章节的 VueRouter 学习中,我们都将使用 CDN 的方式引入路由。

用 Vue.js + VueRouter 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 VueRouter 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 VueRouter 在哪里渲染它们。 在使用 VueRouter 之前,我们需要先了解 VueRouter 的两个内置组件:

接下来我们看一个基本例子:

实例演示

"运行案例" 可查看在线运行效果

代码解释: HTML 代码第 12-13 行,我们定义了两个跳转链接; HTML 代码第 15 行,我们使用 组件来渲染匹配组件; JS 代码第 5-7 行,我们定义了组件 Index; JS 代码第 9-11 行,我们定义了组件 Article; JS 代码第 13-16 行,我们定义了路由数组:

JS 代码第 18-20 行,创建 router 实例,然后传 routes 配置。 JS 代码第 24 行,通过 router 配置参数注入路由。

本节,我们带大家学习了 VueRouter。主要知识点有以下几点:

vue设置登录界面管理员还是学生代码

为了实现登录界面管理员和学生的不同身份登录功能,我们可以通过以下几个步骤来设置:
1. 创建登录界面
首先,我们需要创建一个登录界面,让用户输入账号和密码。可以使用Vue框架中的template语法,创建一个表单,包含账号和密码输入框以及登录按钮。
2. 定义路由
接下来,我们需要定义路由,将登录界面和管理员和学生的页面进行关联。可以使用Vue Router来实现路由定义。我们可以定义两个路由,一个是管理员页面的路由,另一个是学生页面的路由。
3. 根据身份判断路由
在用户输入账号和密码后点击登录按钮时,我们需要根据用户输入的账号来判断用户的身份。如果是管理员,就跳转到管理员页面的路由;如果是学生,就跳转到学生页面的路由。可以通过Vue Router的编程式导航来实现路由跳转。
4. 设置登录状态
最后,我们需要设置登录状态,以便在用户成功登录后,可以在下一次访问时自动跳转到已登录的页面。可以使用VueX来实现状态管理,定义一个store,存储用户的登录状态和身份信息。
以上就是设置登录界面管理员还是学生的基本步骤,具体实现可以参考Vue框架中的相关文档和示例代码。

vue设置登录界面管理员还是学生代码

为了实现登录界面管理员和学生的不同身份登录功能,我们可以通过以下几个步骤来设置:
1. 创建登录界面
首先,我们需要创建一个登录界面,让用户输入账号和密码。可以使用Vue框架中的template语法,创建一个表单,包含账号和密码输入框以及登录按钮。
2. 定义路由
接下来,我们需要定义路由,将登录界面和管理员和学生的页面进行关联。可以使用Vue Router来实现路由定义。我们可以定义两个路由,一个是管理员页面的路由,另一个是学生页面的路由。
3. 根据身份判断路由
在用户输入账号和密码后点击登录按钮时,我们需要根据用户输入的账号来判断用户的身份。如果是管理员,就跳转到管理员页面的路由;如果是学生,就跳转到学生页面的路由。可以通过Vue Router的编程式导航来实现路由跳转。
4. 设置登录状态
最后,我们需要设置登录状态,以便在用户成功登录后,可以在下一次访问时自动跳转到已登录的页面。可以使用VueX来实现状态管理,定义一个store,存储用户的登录状态和身份信息。
以上就是设置登录界面管理员还是学生的基本步骤,具体实现可以参考Vue框架中的相关文档和示例代码。

详解如何在vue-cli中使用vuex

前言

众所周知,vuex 是一个专为 vue.js 应用程序开发的状态管理模式,在构建一个中大型单页应用中使用vuex可以帮助我们更好地在组件外部管理状态。而vue-cli是vue的官方脚手架,它能帮助我们方便的配置webpack。这样看来,有很大的可能我们需要同时使用vue-cli与vuex

如何在vue-cli中使用vuex

项目搭建及添加vuex

当我们使用vue-cli搭建一个vue项目的时候(假设项目名为learn-vuex),搭建完成后的文件目录是这样子的

首先使用npm install --save-dev vuex 把vuex添加到依赖,接下来就是如何在组件中使用vuex,大体上来说有以下两种形式。

通过 store 选项

如果vue-cli搭建成功,在src目录下会有一个main.js文件,main.js的主要作用是把项目中最顶层的app.vue组件挂载到DOM中,其他所有的组件都可以看做是app.vue的子组件。

在main.js中,做如下操作

import Vue from 'vue'

import App from './App'

import router from './router'

import Vuex from 'vuex';

Vue.config.proctionTip = false

//注意下面的代码

Vue.use(Vuex);

const store = new Vuex.Store({

state: {},

getters: {},

actions: {},

mutations: {}

});

//注意router选项,此处的写法等同于store: store

new Vue({

el: '#app',

router,

store,

components: { App },

template: '<App/>'

})

在组件中,就可以通过this.$store 来使用store实例

如果在项目中需要配置的vuex选项很多,我们则应该把vuex的相关代码分割到不同模块

在src下新建store文件夹,在文件夹中创建如下几个文件

我们可以随意设置文件名,但最好可以通过文件名就能判断出这个文件是用来干嘛的

index.js:整合各个模块,创建并导出vuex实例

rootState.js:配置vuex实例的state选项

getters.js:getter选项

mutations.js:mutations选项

actions.js:actions选项

在index.js中,我们需要

import Vue from 'vue';

import Vuex from 'vuex';

import state from './rootState.js';

import getters from './getters.js';

import mutations from './mutations.js';

import actions from './actions.js';

Vue.use(Vuex);

const store = new Vuex.Store({

state,

getters,

actions,

mutations

});

export default store;

剩下的四个文件配置都差不多一样,以rootState.js为例

const state = {

count: 0,

arr: [0,1,2,3,4,5]

}

export default state;

如此这般,在main.js中,我们需要编写的代码就减少了很多

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './store/index';

Vue.config.proctionTip = false

new Vue({

el: '#app',

router,

store,

components: { App },

template: '<App/>'

})

将vuex实例挂载到vue原型链上

这是一种非主流的方式,主要是受axios启发,这里有一篇博客讲解如何在vue组件中使用axios,将axios挂载到vue原型链上是因为不能通过vue.use来使用axios

在这种方法中,我们需要

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

import store from './store/index';

Vue.config.proctionTip = false

//在vue中使用vuex必须先调用vue.use方法

Vue.use(Vuex);

//具体挂载到vue原型的哪个属性上,可以由我们自行决定

//遇到配置繁多的情况也可以进行分割

Vue.prototype.$store = new Vuex.Store({

state: {},

getters: {},

actions: {},

mutations: {}

});

//没有了store选项

new Vue({

el: '#app',

router,

components: { App },

template: '<App/>'

})

如此这般,还是可以通过this.$store 来使用vuex

VueRouter的基本使用

1.导入vue-router.js文件,必须插入到vue.js文件后面

2.定义路由规则

4.将创建好的路由对象绑定到Vue实例上

5.修改URL哈希值

6.通过<router-view>渲染匹配的组件

7.css样式

<router-link>标签:Vue Router中提供专门用于设置哈希值的标签;

<router-view>标签:Vue Router中提供专门用于将路由匹配到的组件渲染到指定位置;

2.给router-link设置选中样式

默认情况下我们可以通过重写router-link -active类名来实现设置选中样式,但是我们也可以通过linkActiveClass来指定选中样式;

案例: 在one界面中又有两个按钮,通过这两个按钮进一步 切换one中的内容

热乐宠物网还为您提供以下相关内容希望对您有帮助:

如何优雅地在vue中添加权限控制示例详解

接下来我们设置 router.beforeEach :// 引入项目的 vueximport store from '@/store'// 引入判断是否拥有权限的函数import { includePermission } from '@/utils/permission'router.beforeEach(async (to, from, next) =&gt; { // 先判断是否为登录,登录了才能获取到权限,怎么判断登录就不写了 if (!isLogin) {...

前端工程师简历中的项目经验怎么写

解决方案:给初始点一个旋转角度,这样看起来就有抛物线的感觉。4.遮罩层处理 在多层级的html渲染中,中间图层的遮罩效果无法实现。 解决方案:遮罩层可以在最底层使用,但是中间层级的遮罩效果需要对图片进行处理,改成png图片,再进行css操作。5.卡顿的处理 在Firefox和ie中,小图标的缓慢移动效果会...

Top