Routes Nuxt子域路由
我正在尝试在Nuxt中实现子域路由。这就是我需要做的:Routes Nuxt子域路由,routes,subdomain,nuxt.js,wildcard-subdomain,Routes,Subdomain,Nuxt.js,Wildcard Subdomain,我正在尝试在Nuxt中实现子域路由。这就是我需要做的: /pages/username/index.vue: username1.mydomain.com (this page should display "hello, i am username1") username2.mydomain.com (this page should display "hello, i am username2") username3.mydomain.com (thi
/pages/username/index.vue:
username1.mydomain.com (this page should display "hello, i am username1")
username2.mydomain.com (this page should display "hello, i am username2")
username3.mydomain.com (this page should display "hello, i am username3")
username4.mydomain.com (this page should display "hello, i am username4")
and so on
/pages/username/content.vue
username1.mydomain.com/content (this page should display "content by username1")
username2.mydomain.com/content (this page should display "content by username2")
username3.mydomain.com/content (this page should display "content by username3")
username4.mydomain.com/content (this page should display "content by username4")
and so on
我发现(尚未实现),但它使用@Nuxtjs/router(我认为)覆盖vue路由器-想知道是否有更好的方法,我真的很喜欢nuxt“创建页面,而不需要定义路由”的方法。
有没有办法在nuxt中做到这一点,理想情况下不使用vue路由器,保持nuxt的默认页面/路由行为
// router.js
import Router from 'vue-router'
export function createRouter(ssrContext, createDefaultRouter, routerOptions) {
const options = routerOptions || createDefaultRouter(ssrContext).options
let routesDirectory = null
if (process.server && ssrContext && ssrContext.nuxt && ssrContext.req) {
const req = ssrContext.req
const domainLevel = (req.headers.host.match(/\./g) || []).length + 1
// Get routes directory by hostname
routesDirectory = domainLevel > 2 ? 'sub-domain' : 'root-domain'
// Save to the object that will be sent to the client as inline-script
ssrContext.nuxt.routesDirectory = routesDirectory
}
if (process.client) {
// Get what we saved on SSR
if (window.__NUXT__ && window.__NUXT__.routesDirectory) {
routesDirectory = window.__NUXT__.routesDirectory
}
}
function isUnderDirectory(route, directory) {
const path = route.path
return path === '/' + directory || path.startsWith('/' + directory + '/')
}
let newRoutes = options.routes
if (routesDirectory) {
newRoutes = options.routes
.filter((route) => {
// remove routes from other directories
const toRemove =
routesDirectory === 'sub-domain'
? 'root-domain'
: 'sub-domain'
return !isUnderDirectory(route, toRemove)
})
.map((route) => {
// remove directory from path and name
if (isUnderDirectory(route, routesDirectory)) {
return {
...route,
path: route.path.substr(routesDirectory.length + 1) || '/',
name: route.name.substr(routesDirectory.length + 1) || 'index'
}
}
return route
})
}
return new Router({
...options,
routes: newRoutes
})
}
如果您有预先确定的用户名列表,此模块“”可以帮助您 以下是一份: 使用类似以下的文件树:
|
|─pages
| ├───username1
| ├───username2
| ├───username3
| └───main-domain
答复如下:
但如果无法预测您的用户名,则应使用路由器处理子域,如下所示:
|
|─pages
| ├───username1
| ├───username2
| ├───username3
| └───main-domain