vue.js 路由模块封装

Vue.js使用vue-router封装路由模块

最新推荐文章于 2025-10-26 19:28:15 发布

原创

最新推荐文章于 2025-10-26 19:28:15 发布 · 479 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

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

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

npm install vue-router

在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

在上面的代码中，我们使用Vue.use()来安装vue-router插件。然后，我们创建一个新的Router实例，并将其导出，以便在其他组件中使用。
然后，我们可以在上面定义的router实例中，添加具体的路由规则。例如，我们可以将路由规则定义为一个数组，每个路由规则包含路径和相应的组件：

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