Vue-router
Posted agoodmanisme
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-router相关的知识,希望对你有一定的参考价值。
路由导航守卫-beforeEach
如果用户没有登陆,直接通过URL访问特定的页面,这样的话我们需要重新将其导航到登陆页面。
login(){
this.$refs.loginFormRef.validate( async valid =>{
console.log(valid);
if (!valid) return;
const {data:res}= await this.$axios.post("login/loginCheckOut",this.loginForm);
if(res.code!=200) return this.$message.error(‘登录失败!‘);
this.$message.success(‘登录成功!‘);
//将登录成功后的token保存到客户端的sessionStorage中
window.sessionStorage.setItem("token",res.data.token);
//通过编程式导航跳转到后台主页
this.$router.push(‘/home‘);
});
}
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‘, component: Login},
{path: ‘/home‘, component: Home}
]
});
//挂载路由导航守卫-beforeEach
router.beforeEach((to, from, next) => {
//to 将要访问的路径
//from 代表从哪个路径跳转而来
//next 是一个函数,表示放行
//next() 放行 next(‘/login‘) 强制跳转
if (to.path === ‘/login‘) return next();
const tokenStr=window.sessionStorage.getItem(‘token‘);
if (!tokenStr) return next(‘/login‘);
next();
});
//暴露路由对象
export default router;
路由占位符
<template>
<div id="app">
<!--路由占位符-->
<router-view/>
</div>
</template>
<script>
export default {
name: ‘App‘
}
</script>
重定向
import Vue from ‘vue‘
import Router from ‘vue-router‘
import Login from "../components/Login";
Vue.use(Router)
export default new Router({
routes: [
{
path: ‘/‘,
redirect: ‘/login‘ //重定向
},
{
path: ‘/login‘,
component: Login
}
]
})
以上是关于Vue-router的主要内容,如果未能解决你的问题,请参考以下文章