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组件的内容。这样，我们就可以通过路由来控制页面的跳转和展示了。