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
⚠️ 要想路由伪静态,必须传路由参数