山东大学程序设计能力提升平台路由

最新推荐文章于 2024-09-17 19:26:49 发布

Kätzchen-408

最新推荐文章于 2024-09-17 19:26:49 发布

阅读量241

点赞数

分类专栏： JS 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45842078/article/details/120685637

版权

JS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了Vue中route, router, routes的区别，route作为单个路由，router是路由管理器，而routes是一组路由配置。同时，探讨了异步组件懒加载的重要性，通过ES和Vue的两种方式实现，并展示了如何使用路由拦截器进行权限控制。懒加载能优化应用性能，减少打包体积。

摘要由CSDN通过智能技术生成

2021SC@SDUSC

route,router,routes的区别和用法

router:一个机制，相当于一个管理者，它来管理路由:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

routes:一组路由:

const routes=[
{
  	path: '/',
    component: resolve => require(['./pages/Home'], resolve),
    children: [
      {
        path: '',
        component: resolve => require(['./views/Home/ProblemSets'], resolve),
        meta: {
          title: '首页'
        }
      }
      ]
}
]

route:一个路由

new一个路由对象:

const router = new Router({
  routes
})

export default router

异步组件懒加载

懒加载可以减少webpack打包后的文件大小,避免组件重复加载,提高网页性能.在路由配置文件中或main.js里都可以对路由进行配置

1.ES实现异步组件懒加载(import)

const routes = [
    {
      path: '/',
      name: 'HelloWorld',
      component:() => import("@/components/HelloWorld") 
    },
]

2.vue异步组件实现懒加载

const routes = [
    {
      path: '/',
      name: 'HelloWorld',
      component:resolve => require(['@/components/HelloWorld'], resolve),
    },
]

路由拦截器

例如,在main.js中:

router.beforeEach((to, from, next) => {
    if (to.name === 'register') return next()
    if (to.name === 'forgetPassword') return next()
    if (to.name === 'activateAccount') return next()
    if (to.name === 'sendMail') return next()

    if (!window.sessionStorage.getItem("tk")) {
        if (to.name !== 'login') {
            next({name: 'login'})
        }
    }
    next()
})