要实现“不影响路由器的情况下分组页面”,可以使用 Nuxt.js 的动态路由功能。以下是一个示例解决方法:
首先,在 Nuxt.js 项目的 pages
目录下创建一个名为 _group.vue
的文件。这个文件将作为分组页面的模板。
在 _group.vue
文件中,可以使用 Nuxt.js 的
组件来渲染子页面。这样可以实现在不影响路由器的情况下切换子页面。
Group Page
然后,在 pages
目录下创建分组的子页面。例如,创建 pages/group/page1.vue
和 pages/group/page2.vue
。
在 pages/group/page1.vue
和 pages/group/page2.vue
中,可以编写子页面的内容。
在 Nuxt.js 项目的 nuxt.config.js
文件中,配置动态路由。将 _group.vue
设置为动态路由的模板,并定义分组页面的路径。
export default {
// ...
router: {
extendRoutes(routes, resolve) {
routes.push({
name: 'group',
path: '/group/:page',
component: resolve(__dirname, 'pages/_group.vue')
})
}
}
}
pages/index.vue
中添加链接:
Home Page
Go to Group Page 1
Go to Group Page 2
这样,当点击链接时,将会渲染对应的分组页面,并且不会影响路由器。
上一篇:不影响路径的情况下缩放SVG