Vue-router

Posted 2020-11-25 agoodmanisme

路由导航守卫-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
    }
  ]
})

来自为知笔记(Wiz)