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的主要内容,如果未能解决你的问题,请参考以下文章

百行代码带你入门 vue-router!

typescript vue-router代码分裂

Vue-Router

vue2.0有哪些变化

Vue.js 生态之vue-router

Vue.js 生态之Vue-router 基础三