router.js相关配置

router.js相关配置

文章目录

​​有关路由的相关配置 ( 路由懒加载和路由鉴权 )​​​​router.js​​​​路由懒加载的不同写法​​​​其他路由知识点​​

​​1. router-link​​​​2. router-view​​​​3. Vue-router传递参数​​​​4. Vue路由导航​​

有关路由的相关配置 ( 路由懒加载和路由鉴权 )

router.js

/router/index.js

import Vue from 'vue'import Router from 'vue-router'import { getStore } from 'js/store'Vue.use(Router);var router = new Router({ routes: [ { path: '*', redirect: '/' }, { path: '/', name: '/', component: () => import('./views/Index.vue'), // vue路由懒加载 异步加载 meta: { title: '首页', requireAuth: true // 只要此字段为true，必须做鉴权处理 } }, { path: '/test', name: 'test', component: () => import('./views/Test.vue'),// vue路由懒加载 异步加载 meta: { title: 'test', requireAuth: true // 只要此字段为true，必须做鉴权处理 } }, { path: '/login', name: 'login', component: () => import('./views/Login.vue'),// vue路由懒加载 异步加载 meta: { noNav: true // 不显示nav } }]});let indexScrollTop = 0;router.beforeEach((to, from,) => { // 路由鉴权：在路由meta对象中由个requireAuth字段，只要此字段为true，必须做鉴权处理 if (to.matched.some(res => res.meta.requireAuth)) { const token = getStore({ name: 'access_token', type: "string" });// 获取localstorage中的access_token console.log(token); // 路由进入下一个路由对象前，判断是否需要登陆 if (!token) { // 未登录 next({ path: '/login', query: { redirect: to.path // 将跳转的路由path作为参数，登录成功后再跳转到该路由 } }) } else { // 用户信息是否过期 let overdueTime = token.overdueTime; let nowTime = +new Date(); // 登陆过期和未过期 if (nowTime > overdueTime) { // 登录过期的处理，君可按需处理之后再执行如下方法去登录页面 // 我这里没有其他处理，直接去了登录页面 next({ path: '/login', query: { redirect: to.path } }) } else { next() } } } else { next() } if (to.path !== '/') { // 记录现在滚动的位置 indexScrollTop = document.body.scrollTop } document.title = to.meta.title || document.title})router.afterEach(route => { if (route.path !== '/') { document.body.scrollTop = 0 } else { Vue.nextTick(() => { // 回到之前滚动位置 document.body.scrollTop = indexScrollTop }) }})export default router;

路由懒加载的不同写法

1. webpack < 2.4版（vue-cli2）的懒加载

const Index = resolve => require(['./views/Index.vue'], resolve)

2. webpack > 2.4版（vue-cli3）的懒加载

const Index = () => import('./views/Index.vue')

其他路由知识点

1. router-link

2. router-view

router-view: 渲染匹配到的视图组件,router-view匹配到的视图组件里面还可以嵌套自己的router-view.根据嵌套路径(children)来继续渲染.router-view可以通过name属性来渲染对应的component下相应的组件router-view可以配合transition与keep-alive使用,如果同时使用,里面要使用keep-alive.keep-alive缓存router的请求

3. Vue-router传递参数

​​Vue-router传递参数3种方法​​

4. Vue路由导航

​​Vue路由导航 router-link 和 router.push​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。