[英]How to open route as modal on Desktop but page on mobile in Nuxt
I am using the @nuxtjs/router module for defining custom routes.我正在使用@nuxtjs/router模块来定义自定义路由。 Here is my router.js file
这是我的 router.js 文件
import Vue from 'vue'
import Router from 'vue-router'
import News from '~/pages/News'
import Login from '~/pages/auth/Login'
import Signup from '~/pages/auth/Signup'
import Account from '~/pages/Account'
Vue.use(Router)
export function createRouter() {
return new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Index',
component: News,
},
{
path: '/news',
name: 'News',
component: News,
},
{
path: '/news/:tag',
name: 'TaggedNews',
component: News,
},
{
path: '/news/:id([a-f0-9]{32})/:title',
name: 'NewsItem',
component: News,
},
{
path: '/news/:tag/:id([a-f0-9]{32})/:title',
name: 'TaggedNewsItem',
component: News,
},
{
path: '/login',
component: Login,
},
{
path: '/signup',
component: Signup,
},
{
path: '/account',
component: Account,
},
],
})
}
I want to open the /login route as a modal on Desktop but page on mobile.我想在桌面上打开 /login 路由作为模式,但在移动设备上打开页面。 How do I go about it?
我该怎么做?
Short answer would be you can't, as for using a modal you need to tell the app what "actual route" you are on - imagine navigating directly to /login
on desktop and the issue becomes clear.简短的回答是您不能,至于使用模态,您需要告诉应用程序您所在的“实际路线” - 想象一下直接导航到桌面上的
/login
,问题就变得清晰了。
My suggestion would be to not add a route for login, but to use a query Param for whether or not the Login modal should be displayed:我的建议是不要添加登录路径,而是使用查询参数来确定是否应显示登录模式:
On mobile, the modal can be styled as a full screen block.在移动设备上,模态可以设置为全屏块。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.