zoukankan      html  css  js  c++  java
  • vue-router 路由懒加载

    index.js

    //引入
    import { createRouter, createWebHashHistory } from 'vue-router'
    // import Home from '../views/Home.vue'
    // import Test3 from '../views/Test3.vue'
    
    //路由懒加载
    const Home = () => import('../views/Home.vue');
    const Test3 = () => import('../views/Test3.vue');
    
    
    //创建路由对象
    const routes = [
      {
        path: '/',
        name: 'Home',
        component: Home
      },
        //路由重定向
      {
        path: '/home',
        redirect:'/'
      },
      {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
      },
      {
        path: '/test1_bak',
        name: 'Test1_bak',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/Test1_bak.vue')
      },
      {
        path: '/test1',
        name: 'Test1',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/Test1.vue')
      },
      {
        path: '/test2',
        name: 'Test2',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/Test2.vue')
      },
      {
        path: '/test3/:id',
        name: 'Test3',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: Test3
      }
    ]
    
    const router = createRouter({
      history: createWebHashHistory(),
      linkActiveClass:'current',
      routes
    })
    
    //导出路由对象
    export default router
  • 相关阅读:
    url的非法字符有哪些
    asp.net各种获取客户端ip方法
    可编辑表格
    菜单弹出隐藏
    淡入淡出窗口
    使用XML传递数据
    Intellij IDEA将工程打包成jar包并执行
    使用JavaScript实现ajax
    AJAX基本演示使用
    统计指定目录下的视频时长
  • 原文地址:https://www.cnblogs.com/mingforyou/p/15214341.html
Copyright © 2011-2022 走看看