zoukankan      html  css  js  c++  java
  • 说说activeclass是哪个组件的属性

    active-class是哪个组件的属性

    active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换

    在vue组件中怎么获取到当前的路由信息

    如果是template中获取直接 $route 即可
    如果是script中获取 this.$route
    可以 console.log(this.$route) 查看其详细信息

    路由重定向

    路径:{ path: '/a', redirect: '/b' }
    命名的路由: { path: '/a', redirect: {name:'/foo'} }
    动态重定向目标: { path: '/a', redirect: to => {
    const {
      query,
      params,
      hash
    } = to
      if (params.name) {
        return /${params.name}
      } else if (query.to && query.to === "bar") {
        return /${query.to}
      } else if (hash === '#baz') {
        return '/baz'
      }
      }
    }

    怎么实现路由懒加载

    /* vue异步组件技术 */
    {
      path: '/home',
      name: 'home',
      component: resolve => require(['@/components/home'],resolve)
    },{
      path: '/index',
      name: 'Index',
      component: resolve => require(['@/components/index'],resolve)
    },{
      path: '/about',
      name: 'about',
      component: resolve => require(['@/components/about'],resolve)
    } 


    组件懒加载方案二 路由懒加载(使用import)
    // 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
    /* const Home = () => import('@/components/home')
    const Index = () => import('@/components/index')
    const About = () => import('@/components/about') */
    // 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。 把组件按组分块
    const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
    const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
    const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

    {
      path: '/about',
      component: About
    }, {
      path: '/index',
      component: Index
    }, {
      path: '/home',
      component: Home
    }


    webpack提供的require.ensure()
    vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。
    这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
    /* 组件懒加载方案三: webpack提供的require.ensure() */
    {
      path: '/home',
      name: 'home',
      component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
    }, {
      path: '/index',
      name: 'Index',
      component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
    }, {
      path: '/about',
      name: 'about',
      component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
    }
     
  • 相关阅读:
    JS中的prototype
    Php5.3的lambda函数以及closure(闭包)
    JavaScript事件委托的技术原理
    css 里层元素撑不开外层元素
    扩展VirtualBox虚拟机磁盘容量
    easyUI 条件查询 跟分页数据展示写在了一起的
    (转)Hibernate中关于多表连接查询hql 和 sql 返回值集合中对象问题
    有想去北京工作的的想法了
    第一次写oracle SQL 两个表链接查询
    第三天 SQL小记
  • 原文地址:https://www.cnblogs.com/zhilu/p/13823375.html
Copyright © 2011-2022 走看看