下载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,
}
},