1. 程式人生 > 其它 >nuxt.js實現同級目錄下建多個動態路由,並將連結設定.html字尾

nuxt.js實現同級目錄下建多個動態路由,並將連結設定.html字尾

nuxt實現路由偽靜態

1、同一資料夾下新建兩個頁面檔案——PageA.vue/PageB.vue

2、在nuxt.config.js檔案router項配置兩個頁面的動態路由,重啟專案

router: {
    extendRoutes(routes, resolve) {
      routes.push(
        {
          name: "pageA",
          path: "/strA-:id",
          component: resolve(__dirname, "pages/test/pageA.vue")
        },
        {
          name: 
"pageB", path: "/strB/:id", component: resolve(__dirname, "pages/test/pageB.vue") } ); } },

3、配置跳轉

<template>
    <div class="container">
        <a @click="$router.push(`/strA-${'引數id'}.html`)">去到頁面A</a>
        <a @click="$router.push(`/strB/${'引數id'}`)">去到頁面B</a>
    </div>
</template>

4、檢視效果

PageA: 127.0.0.1:9000/strA-引數id.html 

PageB: 127.0.0.1:9000/strB/引數id 

⚠️ 要想路由偽靜態,必須傳路由引數