vue-router路由守卫、路由传参及使用，Comming！

新宇最优秀

于 2020-10-28 10:38:04 发布

阅读量1.5k

点赞数 1

文章标签： vue.js

本文链接：https://blog.csdn.net/tendernessxy/article/details/109327236

版权

本文详细介绍了Vue.js中的路由守卫，包括全局路由守卫、路由独享守卫和组件内守卫的使用，以及如何通过不同方法进行路由参数传递，帮助开发者更好地实现登录验证和页面跳转控制。

摘要由CSDN通过智能技术生成

前言：
使用vue的时候总会使用到前端vue-router路由，检验登陆状态，检验是否路由跳转，就需要路由守卫来解决，这一篇将会多多少少能够让你运用路由守卫。

一、全局路由守卫

首先，
在vue文件目录里找到 main.js 文件

		import Vue from 'vue'
		import App from './App'
		import router from './router'
		import store from './store'
		router.beforeEach((to, from, next) => {
   
		  // ...
		});
		new Vue({
   
		  el: "#app",
		  store,
		  router,
		  components: {
    App },
		  template: "<App/>"
		});

这是全局的路由守卫，每次在路由跳转的时候，都会触发这个函数。

其中，

to 就是去的路由去往哪儿
from 是跳转前的路由从哪儿跳过来的
next 就是确认跳转 ok

		router.beforeEach((to, from, next) => {
   
			//vuex里面的userinfo是否已经存在，不然就直接跳转到登录页面
		  if(store.state.userInfo || to.path === "/login") {
   
		      next