vue.js 路由模块封装

在Vue.js中，有一个官方提供的路由库vue-router，它可以用于构建单页应用程序（SPA）的路由功能。下面我将演示如何使用vue-router进行路由模块的封装。

1. 首先，需要安装vue-router库。可以通过npm或yarn进行安装：

npm install vue-router

1. 在Vue.js中，需要创建一个router.js文件来封装路由模块。在该文件中，我们需要导入Vue和vue-router，并创建一个新的Router实例：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  routes: [
    // 在这里定义路由
  ]
})

export default router

1. 在上面的代码中，我们使用Vue.use()来安装vue-router插件。然后，我们创建一个新的Router实例，并将其导出，以便在其他组件中使用。

2. 然后，我们可以在上面定义的router实例中，添加具体的路由规则。例如，我们可以将路由规则定义为一个数组，每个路由规则包含路径和相应的组件：

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

1. 在路由规则中，我们可以指定路径（path）和对应的组件（component）。例如，在上面的代码中，我们定义了两个路由规则：一个是根路径'/'和Home组件的映射关系，另一个是'/about'路径和About组件的映射关系。

2. 最后，我们需要将router实例注入到Vue实例中。在主入口文件（main.js）中，导入router实例，并在Vue实例中使用它：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

1. 在上面的代码中，我们将router实例注入到Vue实例中，并使用router实例的routes属性来定义路由规则。

至此，我们完成了使用vue-router进行路由模块封装的过程。

在以上的代码中，我们封装了一个简单的路由模块，其中包含两个路由规则：根路径'/'和Home组件的映射关系，以及'/about'路径和About组件的映射关系。你可以根据自己的需求，添加更多的路由规则。

当我们访问根路径'/'时，会显示Home组件的内容；当访问'/about'路径时，会显示About组件的内容。这样，我们就可以通过路由来控制页面的跳转和展示了。