nuxt自定义路由

最新推荐文章于 2025-04-04 18:52:27 发布

玩代码的菜鸟

最新推荐文章于 2025-04-04 18:52:27 发布

阅读量1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Nuxt 文章标签：前端 javascript 网络

本文链接：https://blog.youkuaiyun.com/junhian/article/details/131539009

Nuxt 专栏收录该内容

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

众所周知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
  })
}

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