Vue 动态路由、异步加载组件、滚动行为、keep-alive....

简介: Vue 动态路由、异步加载组件、滚动行为、keep-alive....

  • #### 动态路由以及传值

export default new Router({
     routes: [{
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/city',
        name: 'City',
        component: City
      },
      {
        path: '/detail/:id',
        name: 'Detail',
        component: Detail
      }]
})


第三个就是动态路由,在页面中如何使用动态路由的参数:


this.$route.params.id

  • #### keep-alive

<keep-alive>
    <router-view></router-view>
 </keep-alive>

默认这么使用是所有的页面数据都会被缓存再次使用。 如果想要指定的页面不需要缓存数据可以这么做:


方案一:


activated () { }

在每个页面调用 activated 的时候做数据再次加载重置等操作


方案二:


<keep-alive exclude="Detail">
    <router-view></router-view>
 </keep-alive>

将不需要缓存的页面名字写在这里就可以了。但是这样的话每次都会去请求更新当前页面的数据内容,所以可以更具情况使用吧。


  • #### 滚动行为

滚动行为 每次滚动其他的页面也会跟着滚动,可以这么修改 router/index.js

export default new Router({
     routes: [{
        path: '/',
        name: 'Home',
        component: Home
      },
      {
        path: '/city',
        name: 'City',
        component: City
      },
      {
        path: '/detail/:id',
        name: 'Detail',
        component: Detail
      }],
      scrollBehavior (to, from, savedPosition) {
        return { x: 0, y: 0 }
      }
})


也就是说每次进入一个新的路由都从 xy 为 0 的位置开始。


  • #### 异步加载组件

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'
Vue.use(Router)
export default new Router({
    routes: [{
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/city',
      name: 'City',
      component: City
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    }],
    scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
})


上面这种是会一次性拿回所有页面的 js 代码,推荐在小型项目的时候使用。


当项目太大的时候,js(至少超过1mb才考虑使用异步组件) 文件会很庞大, 那么我们需要每个页面只拿每个页面的代码,那么我们就需要用到异步加载,进行 js 的拆分加载:


import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
    routes: [{
      path: '/',
      name: 'Home',
      component: () => import('@/pages/home/Home')
    },
    {
      path: '/city',
      name: 'City',
      component: () => import('@/pages/city/City')
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: () => import('@/pages/detail/Detail')
    }],
    scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
})


子组件也是一样的可以使用异步加载:


同步加载:


import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
export default {
   name: 'Home',
   components: {
      HomeHeader,
      HomeSwiper
  }
}

异步加载:


export default {
   name: 'Home',
   components: {
      HomeHeader: () => import('./components/Header'),
      HomeSwiper: () => import('./components/Swiper'),
  }
}

相关文章
|
3月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
74 8
|
3月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
181 64
|
3月前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
3月前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
3月前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
3月前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
3月前
|
缓存 JavaScript UED
Vue 中异步加载模块的方式
【10月更文挑战第23天】这些异步加载模块的方式各有特点和适用场景,可以根据项目的需求和架构选择合适的方法来实现模块的异步加载,以提高应用的性能和用户体验
|
3月前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
175 0
|
8天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。

热门文章

最新文章