nuxt2路由，以及重构以前项目，路由使用

本文主要是介绍nuxt2路由，以及重构以前项目，路由使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Nuxt.js根据pages目录结构自动生成vue-router模块的路由配置。

配置生成的路由可在.nuxt文件下的router.js文件中查看到，如：

export const routerOptions = {mode: 'history',base: '/',linkActiveClass: 'nuxt-link-active',linkExactActiveClass: 'nuxt-link-exact-active',scrollBehavior,routes: [{path: "/list",component: _0d6e904e,name: "list"}, {path: "/",component: _4b42c327,name: "index"}],fallback: false
}

• 路由跳转的方式 nuxt-link 与 $router.push

<template><div>首页<nuxt-link to="/list">list链接跳转</nuxt-link><button @click="btn">js跳转</button></div>
</template><script>
export default {name: "IndexPage",methods: {btn() {this.$router.push("/list");},},
};
</script>

• 路由传参

<template><div>首页<nuxt-link :to="{ name: 'list', query: { id: 1 }, params: { id: 2 } }">list链接跳转</nuxt-link><button @click="btn">js跳转</button></div>
</template>
<script>
export default {name: "IndexPage",methods: {// 若是记不清name对应的是params，path对应分query的话，就想26个英语单词pq连在一起就行。btn() {// this.$router.push({//   name:'list',//   params:{//     id:1//   }// });this.$router.push({path: "list",query: {id: 2,},});},},
};
</script>

list.vue 接收参数，与vue之前是一样的

<template><div>list 页面</div>
</template>
<script>
export default {name: "list",created() {console.log("$route:", this.$route);},methods: {},
};
</script>

• 路由管理，通常项目页面中需要生成子路由，或者动态路由。

1. 生成子路由，如search下面需要生成children子路由detail.vue和list.vue。 则需要在pages目录下建立search.vue和search文件夹，然后在search文件夹下建立detail.vue和list.vue文件即可，自动生成的路由结构如下：

export const routerOptions = {mode: 'history',base: '/',linkActiveClass: 'nuxt-link-active',linkExactActiveClass: 'nuxt-link-exact-active',scrollBehavior,routes: [ /** * */{path: "/search",component: _6e5709ba,name: "search",children: [{path: "detail",component: _79c8be26,name: "search-detail"}, {path: "list",component: _36f5c88c,name: "search-list"},{path: ":id?", // 生成的动态路由component: _ce670164,name: "search-id"}]}],fallback: false
}

2. 动态路由与上述子路由建立目录一样，只不过动态的vue文件需要依下划线开头建立vue文件如：_xxx.vue

• 若是遇到项目重构的时候，前项目router路由文件超级多的时候，去使用pages自生成router路由过程过于繁琐，则也可以不使用自生成的router路由，直接用前项目的router文件，配置如下：

1. 先安装 @nuxtjs/router

npm i @nuxtjs/router -S

2. 下载完成后，在nuxt.config.js中进行modules的配置

 modules: ['@nuxtjs/router'],

3. 在nuxt项目的根目录下前项目的router.js复制过来（起名最好叫router.js）
4. 修改router.js里的componet引用内容，不要做懒加载引用，如
   原先的js文件

const routes = [{path:'/list',name:'list',compinent:()=>{import('xxx/xxx/list.vue')}}
]

需要修改成现在的js方式

import List from 'xxx/xxx/list.vue'
const routes = [{path:'/list',name:'list',compinent: List}
]

5. nuxtjs生成的路由与vue-router的路由返回结果不同，需要进行修改，
   原vue-router的路由结果

const router = new VuwRouter({mode: 'history',base: process.env.BASE_URL,routes
})

需改成如下的返回结果，返回一个函数

export function createRouter(){return new VueRouter({mode: 'history',routes})
}

注意：运行启动若是报错，缺少nuxtjs/builder模块的话，则npm安装下此模块即可。

这篇关于nuxt2路由，以及重构以前项目，路由使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---