nuxt.js實現同級目錄下建多個動態路由,並將連結設定.html字尾
阿新 • • 發佈:2022-05-24
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
⚠️ 要想路由偽靜態,必須傳路由引數