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>- 路由管理，通常项目页面中需要生成子路由，或者动态路由。
- 生成子路由，如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
}
- 动态路由与上述子路由建立目录一样，只不过动态的vue文件需要依下划线开头建立vue文件如：_xxx.vue
- 若是遇到项目重构的时候，前项目router路由文件超级多的时候，去使用pages自生成router路由过程过于繁琐，则也可以不使用自生成的router路由，直接用前项目的router文件，配置如下：
- 先安装 @nuxtjs/router
npm i @nuxtjs/router -S
- 下载完成后，在nuxt.config.js中进行modules的配置
modules: ['@nuxtjs/router'],
- 在nuxt项目的根目录下前项目的router.js复制过来（起名最好叫router.js）
- 修改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}
]
- 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安装下此模块即可。