你们有没有想过在Vue的项目上怎么弄路由封装公用组件啊? 这个问题可有点大哦!

大家都知道，在Vue项目里有时需要多个页面共用某个组件。那怎么办？别急，让我告诉你怎么做！

实际上，防止写出重复的代码，就得将公用部分包装一下，用路由的办法来应用到各个地方去！牛不牛？

  

    
User Info
    
Name: {{ user.name }}
    
Age: {{ user.age }}
  


export default {
  name: 'UserInfo',
  data() {
    return {
      user: {
        name: 'John',
        age: 25,
      },
    }
  },
}

别急！讲完了！是不是想过在Vue项目里如何用路由封装公共组件？这个问题很关键！

别急别急听我说！首先，你得先在项目里建个叫components的文件夹，再把公用组件那堆儿代码扔进去。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})
export default router

哎哟喂，慢着点，我还没讲完！你们知道吗，运用路由封装工具处理公共组件时，有些小细节得留心！有想过具体是哪些不？

这个问题很重要！用路由封装公用模块前，先确认你的vue-router设置对了，而且要把公用模块导入并注册到要用的页面上才行。

  

    
Home Page
    
  


import UserInfo from '@/components/UserInfo.vue'
export default {
  name: 'Home',
  components: {
    UserInfo,
  },
}

这样一来，我们省时又能多省代码，提升项目开发效率，棒不棒？赶紧试试！

  

    
About Page
    
  


import UserInfo from '@/components/UserInfo.vue'
export default {
  name: 'About',
  components: {
    UserInfo,
  },
}

好啦朋友们，今天我跟你们讲了关于在Vue项目里怎么用路由藏好用的组件的办法。希望能帮到你！有啥不懂或者想法就留言告诉我别忘了戳链接和转发给需要的人，这可是对我大大的鼓励