nuxt 带参数动态路由

nuxt是基于vue.js服务端渲染的框架，其中路由文件不像vue项目那样手动配置，而是依据 pages 目录结构自动生成 vue-router 模块的路由
配置。
基于项目seo优化需求，需要将路由改为动态路由。

一、创建带参数的动态路由（两种方法）

方法一、直接创建一个带参数的动态路由

新建文件的时候直接创建带参数的动态路由，这个官网中有介绍，我就不总结了，附上官网地址：

https://www.nuxtjs.cn/guide/routing#%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1

方法二、将原有的路由改为动态路由

因为在写页面的时候没有考虑seo，所以现在要将路由改为带参数的动态路由
例如：
	域名/listPage/tagList?id=454521
	改为
	域名/listPage/tagList/454521

直接在nuxt.config.js文件中设置

export default {
  mode: 'universal',
  router: {
	....
    extendRoutes(routes, resolve) {
      routes.push(
        {
          path: '/:id.html',  // 注意：取参数时，参数名就是此处设置的名字，要保持一样
          component: resolve(__dirname, 'pages/articles/_id.vue'),
          name: 'articles-id',
        },
        {
          path: '/:id/page/:num',  //携带了两个参数，传参的时候位置要对应正确
          component: resolve(__dirname, 'pages/index/normalList.vue'),
          name: 'index-normalList',
        },
        {
          path: '/d/:id',
          component: resolve(__dirname, 'pages/index/downloadDetail.vue'),
          name: 'index-downloadDetail',
        },
      );
    },
  },
  }

二、页面路由跳转（两种方法）

方法一：nuxt-link 组件用于在页面中添加链接至别的页面

<template>
  <div>
    <h1>Home page</h1>
    <nuxt-link :to="{path:'/preview/' + 参数 + '.html'}">关于</nuxt-link>
  </div>
</template>

方法二：

<template>
  <div>
    <h1>Home page</h1>
    <div @click="goTo">关于</div>
  </div>
</template>


goTo() {
	const routeData = this.$router.resolve({
              path: `/preview/${参数}.html`,
            });
            window.open(routeData.href, '_blank');
}

三、获取参数的方法

1、在asyncData获取参数

async asyncData(content) {
    const [detail] = await Promise.all([
      axios.get(`${content.env.baseUrl}/speak/speakWorks/getWorksListByInteresting`, {
        params: {
          id: content.route.params.id,
        },
      }),
    ]);
     return {
      articleDetail: detail.data.result,
    };
  },

2、在mounted或者methods中获取

this.$route.params.id  // id 为页面携带的参数名

以上就是我对前段时间做的nuxt实现带参数动态路由的设置方法，有不对的地方欢迎大家指正，一起进步~