在Vue.js中，可以使用动态路由和异步路由来实现组件的动态加载和复用。

动态路由

动态路由是指通过在路由配置中使用变量来动态生成路由。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

在上面的例子中，我们定义了一个动态路由/user/:id，其中:id表示一个变量，可以根据不同的用户ID动态生成不同的路由。当用户访问/user/1时，就会加载User组件并传递参数id为1。

异步路由

异步路由是指将组件按需加载，而不是一次性全部加载。这可以减少首屏加载时间，提升应用性能。在Vue.js中，可以使用webpack提供的import函数实现异步路由。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: () => import('./views/About.vue')
    }
  ]
})

在上面的例子中，我们将About组件通过import函数进行异步加载。当用户访问/about路由时，会先加载路由组件About.vue，然后再渲染页面。

组件拆分复用

在Vue.js中，可以将组件拆分为更小的组件，然后进行复用。例如，我们可以将页面中的公共部分拆分为组件，然后在需要的地方进行引用。例如：

<template>
  <div>
    <header-nav></header-nav>
    <router-view></router-view>
    <footer-nav></footer-nav>
  </div>
</template>
<script>
import HeaderNav from './HeaderNav.vue'
import FooterNav from './FooterNav.vue'
export default {
  name: 'App',
  components: {
    HeaderNav,
    FooterNav
  }
}
</script>

在上面的例子中，我们将页面中的头部和底部拆分为组件HeaderNav和FooterNav，并在App组件中进行引用。这样，无论哪个页面需要头部和底部，都可以直接引用HeaderNav和FooterNav组件，实现了组件的复用。