1. 在 router 下的 index.JS 路由文件下, 引入相关需要文件;
- import vue from 'vue'
- import Router from 'vue-router'
- import {
- LOGIN
- } from '../common/JS/islogin'
- import HelloWorld from '@/components/HelloWorld'
- import Login from '@/page/Login'
- import Index from '@/page/index/index'Vue.use(Router);
2. 配置相关路由
- const router = new Router({
- routes: [
- {
- path: '/',
- redirect: '/login'
- },
- {
- path: '/login',
- component: Login
- },
- {
- path: '/index',
- meta: {
- requireAuth: true, // 添加该字段, 表示进入这个路由是需要登录的
- },
- component: Index
- }
- ]
- });
3. 路由配置完后, 根据需要登录的页面判断路由跳转
- router.beforeEach((to, from, next) => {
- if (to.meta.requireAuth) { // 如果需要跳转 , 往下走 (1)
- if (true) { // 判断是否登录过, 如果有登陆过, 说明有 token, 或者 token 未过期, 可以跳过登录 (2)
- if (to.path === '/login') { // 判断下一个路由是否为要验证的路由 (3)
- next('/index'); // 如果是直接跳到首页,
- } else { // 如果该路由不需要验证, 那么直接往后走
- next();
- }
- } else {
- console.log('没有'); // 如果没有登陆过, 或者 token 过期, 那么跳转到登录页
- next('/login');
- }
- } else { // 不需要跳转, 直接往下走
- next();
- }
- });export default router;
来源: http://www.jb51.net/article/148243.htm