Vue route的使用

1、route.js文件

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
    routes: [
        {
            path: '/',
            name: 'login',
            component: () => import('./views/login.vue')
        },
        {
            path: '/schools',
            name: 'schools',
            component: () => import('./views/schools/main.vue')
        },
        {
            path: '/main/:id',
            name: 'main',
            component: () => import('./views/report/main.vue'),
            redirect: '/main/:id/class',
            children: [
                {
                    path: '/main/:id/teacher',
                    name: 'teacherMain',
                    component: () => import('./views/teacher/main.vue'),
                },
                {
                    path: '/main/:id/teacher/:gradeId/:subjectId',
                    name: 'teacherMain',
                    component: () => import('./views/teacher/main.vue'),
                },
                {
                    path: '/main/:id/class',
                    name: 'classMain',
                    component: () => import('./views/class/main.vue'),
                },
            ]
        },
        {
            path: '**',          // 错误路由
            redirect: '/login'   //重定向
        }
    ]
})

// 全局路由守卫
router.beforeEach((to, from, next) => {
    function getCookie(name) {
        let arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
            return decodeURIComponent(arr[2]);
        else
            return null;
    }

    // to: Route: 即将要进入的目标 路由对象
    // from: Route: 当前导航正要离开的路由
    // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

    let isLogin = getCookie("localtoken") !== null;  // 是否登录

    // 未登录状态；当路由到nextRoute指定页时，跳转至login
    if (!isLogin && to.name !== 'login') {
        router.push({ name: 'login' });
    }

    // 已登录状态；当路由到login时，跳转至home
    if (to.name === 'login') {
        if (isLogin) {
            router.push('/schools');
        }
    }

    next();
});

export default router;

 

2、路由跳转

2.1 页面跳转

        <router-link tag="nav" active-class="active" :to="'/main/'+schoolID+'/teacher'">
            <a>教师</a>
            <i></i>
        </router-link>
        <router-link tag="nav" active-class="active" :to="'/main/'+schoolID+'/class'">
            <a>班</a>
            <i></i>
        </router-link>

2.2 js方法跳转

this.$router.push('/main/' + this.schoolID + '/teacher');

this.$router.push('/main/' + this.schoolID + '/teacher/' + this.nowGrade + "/" + this.nowSubject);

 

3、使用路由参数

    watch: {
        //如果路由发生了变化，更新页面数据
        $route(to, from) {
            if (to.path !== from.path) {
                this.schoolID = this.$route.params.id;
                this.gradeId = this.$route.params.gradeId;
                this.subjectId = this.$route.params.subjectId;
                this.init();
            }
        }
    },
    data(){
        return {
            schoolID: this.$route.params.id,//学校 id
            gradeId: this.$route.params.gradeId,
            subjectId: this.$route.params.subjectId,
        }
    },