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