nuxt 路由跳转 及 动态路由的使用和传参

路由跳转

nuxt会自己生成路由，所以我们就不需要自己弄路由了。跳转方式如下：

使用<nuxt-link to="/">首页</nuxt-link> 进行跳转。
和 router-link 使用方式一样

推荐使用nuxt-link进行跳转，因为利于SEO收录。

注意 nuxt-link 的路由区分大小写。

如果目录是这样子的，我们在pages/index.vue里面，想跳login里面的文件，跳转方式如下：

- pages
  - login
    - index.vue
    - login.vue
  - index.vue
  
  //  path / name 默认跳转对应文件夹下的 index 文件
<nuxt-link :to="{ path:'/login' }">nuxt-link path跳转login文件夹里的index</nuxt-link>

<nuxt-link :to="{ name:'login' }">nuxt-link name跳转login文件夹里的index</nuxt-link>

<nuxt-link :to="{ path:'/login/login' }">nuxt-link path跳转login文件夹里的login</nuxt-link>

<nuxt-link :to="{ name:'login-login' }">nuxt-link name跳转login文件夹里的login</nuxt-link>

nuxt 会自动给路由生成 name ，如下：

  routes: [{
    path: "/login",
    component: _3a5d3e3b,
    name: "login"
  }, {
    path: "/login/login",
    component: _0404e152,
    name: "login-login"
  }, {
    path: "/",
    component: _7e060150,
    name: "index"
  }],
  
  // 自行生成的路由文件在 .nuxt 下的 router.js 文件里

嵌套路由

如果是嵌套路由，例如：

- pages
  - login
    - index.vue
  - login.vue

// 生成的路由是这样的
routes: [{
    path: "/login",
    component: _3a5d3e3b,
    name: "login",
    children: [{
      path: "login",
      component: _18c050fe,
      name: "login-index-login"
    }]
  }]
  
  // 如果要进入 /login/login, 要在 login 添加 <nuxt-child></nuxt-child> 以显示子路由的内容。

路由传参

文件目录如下：

静态路由

index.vue

    <div style="margin: 20px 0">
      <nuxt-link :to="{path: '/demo/queryRouter', query: {id: 1}}">跳转至queryRouter,传参为query</nuxt-link>
    </div>
    
    

queryRouter.vue

<template>
  <div>
    <div style="margin: 20px 0">query 入参为： {{queryId}}</div>

    <div style="margin: 20px 0">
      <nuxt-link :to="{path: '/demo/queryRouter', query: {id: 2}}"
                 replace>自己跳自己并修改query参数, replace不增加history记录</nuxt-link>
    </div>

    <!-- <div style="margin: 20px 0">
      {{subjectData}}
    </div> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      queryId: '',
      // subjectData: []
    };
  },

  props: {
  },
  // query 入参
  // 如果没有接口，可以直接获取
  asyncData ({ query }) {
    return { queryId: query.id }
  },
  // 如果有接口，可以直接获取
  // async asyncData (ctx) {
  //   let subjectData = await ctx.app.api.homeApi.subject({}).then((resData) => {
  //     // console.log("resData---2", resData.result);
  //     return resData.result
  //   })
  //   subjectData.subjectList = []
  //   return { subjectData, queryId: ctx.query.id }
  // },


  // 使用watchQuery属性可以监听参数字符串的更改。 如果定义的字符串发生变化，将调用所有组件方法(asyncData, fetch, validate, layout, ...)。 为了提高性能，默认情况下禁用。 如果您要为所有参数字符串设置监听， 请设置： watchQuery: true.
  watchQuery: ['id'],

  components: {},

  created () { },

  computed: {},

  mounted () {
    // 方法一   缺陷： 参数更新获取不到
    // this.id = this.$route.query.id
  },
  // 解决 方法一  参数更新获取不到  但是url上的参数还是 旧参数
  // beforeRouteUpdate (to, from, next) {
  //   this.id = to.query.id;
  // },

  // Nuxt.js 可以让你在动态路由组件中定义参数校验方法
  // 如果校验方法返回的值不为 `true`或`Promise`中 resolve 解析为`false`或抛出 Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。
  // validate ({ params }) {
  //   // 必须是number类型
  //   return /^\d+$/.test(params.id)
  // },

  methods: {}
};
</script>
<style lang='stylus' scoped></style>

动态路由 及传参

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录，例如：_id.vue ，params 传值_id会显示在url里面

可以像我这样直接demo里面创建_id.vue文件，也可以 demo 里面创建 _id文件夹，在 _id文件夹里创建 index.vue文件，两种创建方式都是一样的。

**注意： params 路径将 / 替换成 - 第一个参数 key 为动态路由文件名字。 query 为拼接 动态路由文件名字 **

index.vue

<!-- params使用动态路由   -->
    <div style="margin: 20px 0">
      <nuxt-link :to="{ name: 'demo-paramsRouter', params: { paramsRouter: paramsRouter, id: 1}}">跳转至paramsRouter(动态路由),传参为params</nuxt-link>
    </div>
    <!-- query 使用动态路由 -->
    <div style="margin: 20px 0">
      <nuxt-link :to="{ path: '/demo/'+paramsRouter , query: {id: 1}}">跳转至paramsRouter(动态路由),传参为query</nuxt-link>
    </div>

paramsRouter.vue

<template>
  <div>
    <!-- params -->
    <!-- <div style="margin: 20px 0">params 入参为： {{paramsId}}</div>
    <div style="margin: 20px 0">
      <nuxt-link :to="{ name: 'demo-paramsRouter', params: { paramsRouter: paramsRouter, id: 2}}"
                 replace>自己跳自己并修改params参数</nuxt-link>
    </div> -->

    <div style="margin: 20px 0">query 入参为： {{queryId}}</div>
    <div style="margin: 20px 0">
      <nuxt-link :to="{ path: '/demo/'+paramsRouter ,query: {id: 2}}">跳转至paramsRouter(动态路由),传参为query</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      paramsId: '',
      queryId: '',
      paramsRouter: "page2"
    };
  },

  props: {},

  components: {},
  // params 入参
  // asyncData ({ params }) {
  //   console.log("params", params);
  //   return { paramsId: params.id }
  // },
  // query 入参
  asyncData ({ query }) {
    console.log("query", query);
    return { queryId: query.id }
  },
  created () { },

  computed: {},

  mounted () { },

  methods: {}
};
</script>
<style lang='stylus' scoped></style>