nuxt自定义路由

最新推荐文章于 2025-09-10 21:42:05 发布

原创最新推荐文章于 2025-09-10 21:42:05 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #网络

Nuxt 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Nuxt.js项目中手动配置路由。首先，通过npm安装@nuxtjs/router，然后在nuxt.config.js中进行配置。接着，在根目录创建router.js文件，并导入Vue和VueRouter，定义路由结构，如首页组件。最后，创建的VueRouter实例使用history模式，并导出供Nuxt使用。

众所周知nuxt路由文件是自动配置的,想要查看路由的结构只能依照下图

1.首先第一步安装@nuxtjs/router

npm i @nuxtjs/router -S

2.打开nuxt.config.js配置

3.在项目根目录创建router.js文件

4.给router.js下面写下这些文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from "@/pages/index.vue"
Vue.use(VueRouter)
const routes = [
  {
    path:'/',
    name:'Index',
    component:Index
  }
]
export  function createRouter(){
  return new VueRouter({
    mode:'history',
    routes
  })
}

这样就大功告成了,页面文件可以根据自己命名修改