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安装下此模块即可。