在vue中，我们经常遇到需要在用户没有登录状态下，让页面无法渲染的情况。这个问题在实际应用中很常见，因为用户必须具备相应的权限才能访问特定的页面。
为了解决这个问题，我们可以在Vue的路由中定义一个全局的路由守卫，从而在用户没有登录时禁止页面的渲染。
下面，我们将结合具体的示例来介绍如何实现这个功能。
第一步，定义路由守卫
在Vue中，我们可以通过定义路由守卫来控制路由的访问权限。在这个过程中，我们需要使用一个名为“beforeEach”的路由钩子函数，这个函数会在每个路由切换之前被调用。
立即学习“前端免费学习笔记（深入）”；
具体地，我们可以在路由定义中添加以下代码：
router.beforeEach((to, from, next) => {
const isLogin = localStorage.getItem("token"); // 判断是否有登陆态
if (to.meta.requireAuth) { // 判断当前路由是否需要进行权限判断
if (isLogin) { // 已经登陆
next();
} else { // 没有登陆，跳转到登陆页面
next({
path: "/login",
query: {
redirect: to.fullPath // 记下跳转前的 url，为了登陆后自动跳转回原页面
}
});
}
} else {
next();
}
});上面的代码中，我们首先通过“localStorage”判断用户是否具有登陆态，然后判断当前路由是否需要权限判断。如果需要判断，但用户没有登陆，则跳转到登陆页面，并且记录当前页面的 url，为了在登陆成功后自动跳转回原页面。
值得一提的是，“localStorage”是HTML5中的一个新特性，它提供了一种在客户端存储数据的方式。当我们成功登陆后，可以将 token 存储在“localStorage”中，这样就可以在之后的路由判断中使用了。
第二步，定义需要权限判断的路由
在定义路由时，我们可以通过“meta”字段来标记当前路由是否需要进行权限判断。如果需要权限判断，则在路由定义中添加以下代码：
const router = new VueRouter({
routes: [
{
path: "/home",
name: "home",
component: Home,
meta: { requireAuth: true } // 需要进行权限判断
},
{
path: "/login",
name: "login",
component: Login
}
]
});上面的代码中，我们在需要权限判断的路由上添加了“meta: { requireAuth: true }”字段，表示需要进行权限判断。
第三步，实现登陆功能
最后，我们需要实现登陆功能，当用户在登陆成功后，需要将 token 存储在“localStorage”中，并重定向到之前存储的 url。
具体地，我们可以在登陆页面中添加以下代码：
methods: {
login() {
// 登陆成功后，存储 token
localStorage.setItem("token", "userToken");
// 重定向到之前存储的 url
if (this.$route.query.redirect) {
this.$router.push(this.$route.query.redirect);
} else {
this.$router.push("/");
}
}
}上面的代码中，我们在登陆成功后，将 token 存储在“localStorage”中，并重定向到之前存储的 url。
总结
通过以上的步骤，我们可以很容易地实现在Vue中的路由权限控制。在实际应用中，我们可以根据自己的需要，对路由守卫进行灵活的配置，从而实现更加复杂的权限控制机制。
总的来说，Vue在前端框架中的使用广泛，而Vue的路由控制也是非常重要的一个方面。上述的方法可以说在Vue的路由权限控制的解决方法中具有很大代表性，对于学习Vue路由权限控制的人来说，非常值得借鉴。
