vue router的使用

下载router组件

下载有两种方式：

1、手动下载

npm install vue-router --save

2、自动下载

1、创建好项目后，cd进入到项目路径，比如创建了一个obj01的项目：vue create obj01  ，cd obj01
2、然后终端继续输入 vue ui，这时系统会自动打开一个视图版的项目管理器
3、先导入项目，然后点开插件导航栏会看到router、vuex等插件，安装即可

引用router组件

*如果是自动下载，系统已经自动引用了router，无需引用。下面是手动下载的引用方法*

1、在项目中新建文件夹 router/index.js

/*
* 路由对象模块
* */
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'  #引用视图文件

//申明使用插件
Vue.use(VueRouter)

export default new VueRouter({
  routes:[
    {
      path: '/home',
      component: Home  #解析展示视图文件
    }
  ]
})

2、在main.js中全局使用router

import Vue from 'vue'
import App from './App'
import router from './router'  #引入router文件，index.js文件自动也引入了
new Vue({ 
	'el': '#app',
	router ,
	render: h => h(App)
})

router组件的使用

index.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,
    }
},