将CMS或社区首页配置为站点首页的方案分享
nuxt

WebNuxt工程中,如何实现子域名绑定子路由?所述类似,我们只需要在 app/router.options.ts 文件中,完成 /cms -> / 或者 /ask -> / 的静态路由修改即可。

// app/router.options.ts 文件,没有请自行建立
import type { RouterOptions } from '@nuxt/schema'
import { cloneDeep } from 'lodash-es'
import { RouteRecordRaw } from 'vue-router'

/**
 * 修改路由 path
 */
const editPath = (routes: RouteRecordRaw[], oldPath: string) => {
    for (const key in routes) {
        if (routes[key].path.includes(oldPath)) {
            if (routes[key].path === oldPath) {
                // 将 oldPath 路由改为首页
                routes[key].path = '/'
                routes[key].name = '/'
            } else {
                // 子路由修改
                routes[key].path = routes[key].path.replace(oldPath + '/', '/')
            }
        }

        if (routes[key].children?.length) {
            routes[key].children = editPath(routes[key].children!, oldPath)
        }
    }
    return routes
}

// https://router.vuejs.org/api/interfaces/routeroptions.html
export default <RouterOptions>{
    routes: (routes) => {
        let routesTemp = cloneDeep(routes as Writeable<RouteRecordRaw[]>)

        // 对原首页的 path 和 name 进行修改
        const oldIndex = getArrayKey(routesTemp, 'path', '/')
        routesTemp[oldIndex].path = '/home'
        routesTemp[oldIndex].name = '/home'

        // 修改所有静态路由数据中的 /cms
        routesTemp = editPath(routesTemp, '/cms')

        // 社区模块仅需调整第二个参数
        // routesTemp = editPath(routesTemp, '/ask')

        return routesTemp
    },
}

以上代码将路由 /cms 修改为 /,同时将所有子路由,比如 /cms/info/1 修改为了 /info/1/cms/channel/2 修改为 /channel/2,请注意替换已经对外分发或顶部导航栏的链接地址。

至此,打开站点首页已经是 CMS/社区 首页了。

常见问题

  1. 点击顶栏的 首页 按钮时,页面可能无法正常跳转,您可以全局搜索 { name: '/' } 替换为 { name: 'cmsIndex' }

  2. 站点顶部导航栏可能还有链接向 /cms 或者 /ask 的链接,请于 后台->会员管理->会员规则管理 中修改路径路径或链接地址,去掉地址中的 cms/

5个回答默认排序 投票数排序
we15123
we15123
程序开发 前后端 全栈开发搭建 python php golang nodejs vue uniapp 脚本开发 易语言
2周前

666

jayip
jayip
-
2周前

学习

ipiaobo
ipiaobo
这家伙很懒,什么也没写~
2周前

感谢分享~

淡了
淡了
欲买桂花同载酒,终不似,少年游.
2周前

学到了

陈烁临
陈烁临
这家伙很懒,什么也没写~
2天前

我新购买安装的工程里面 怎么没有 app/router.options.ts

YANG001
YANG001回复陈烁临
这家伙很懒,什么也没写~
2天前
陈烁临
陈烁临回复YANG001
这家伙很懒,什么也没写~
1天前

好的大佬 我瞎了

请先登录
0
1
1
7