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