Javascript Vue.js-如何在vuejs中添加多个布局?
我正在创建一个vuejs应用程序,其中我希望有两个不同的布局,一个用于用户界面,另一个用于管理界面。 在用户界面中,我有一个名为“Admin Panel”的按钮,单击该按钮可以转到管理端并呈现新布局。到目前为止,我的工作如下:Javascript Vue.js-如何在vuejs中添加多个布局?,javascript,vue.js,vue-router,Javascript,Vue.js,Vue Router,我正在创建一个vuejs应用程序,其中我希望有两个不同的布局,一个用于用户界面,另一个用于管理界面。 在用户界面中,我有一个名为“Admin Panel”的按钮,单击该按钮可以转到管理端并呈现新布局。到目前为止,我的工作如下: 我在src中创建了一个容器文件夹来保存布局文件 Userpanel.vue Adminpanel.vue 还有一个路由器文件夹,用于保存路由文件 user.js admin.js index.js Userpanle.js admin.js index.js
- 我在src中创建了一个容器文件夹来保存布局文件
- Userpanel.vue
- Adminpanel.vue
- 还有一个路由器文件夹,用于保存路由文件
- user.js
- admin.js
- index.js
谢谢。我以前已经尝试过这个方法,我的方法是根据不同的布局进行切换 因此,在定义路由时,可以添加元字段:
path: '/admin-panel/reports',
component: Reports,
name:'Reports',
meta: { template: 'admin' }
然后,您需要在路线改变时检查路线。实现这一点的最简单方法是使用全局导航卫士(如页面上的示例所示)。如果它检测到它是一个管理页面,它会更改Vuex属性,然后切换您正在使用的模板
我要说的是,最后我停止了使用这种方法,并用包装器组件(admin/user/etc)包装了我的所有页面,这样我就可以控制Vue本身的一切。这主要是由于Vue Router在等待用户进行身份验证方面的限制,因此这对您来说可能不是问题。在admin.js中,您将子项设置错误。路径应该是
路径:'/reports'
而不是路径:'/admin panel/reports'
(除非您希望链接像/admin panel/admin panel/reports)。子节点自动获取父前缀路径。idk如果它能回答你的问题。我还是不明白你有什么问题。哪条路由不起作用?但它仍然呈现用户的布局,并且显示URL不起作用defined@elichen请看,从前端开始,当我点击“管理面板”按钮,点击此处的管理侧,将url从“localhost:8080/home”更改为“localhost:8080/admin panel/reports”在错误的路径上,我在我的user.js中使用此路径({path:'/*',重定向:“not found”})显示未找到的消息如果在user.js中使用({path:'/*',重定向:“not found”})。这之后所有的路由器都坏了。因此,在这之后,它永远不会到达路由器。换句话说,无法访问admin.js路由器。顺便说一句,在您的情况下,它应该是localhost:8080/admin panel/admin panel/reports@elichen我已经通过删除“管理面板”修复了URL问题。删除“未找到路径”后,我收到一个错误,您可以在这里看到tinyurl.com/y3lyyst6
使用前缀“http://”打开此链接
<template>
<v-app>
<h4>Admin Layout</h4>
<router-view></router-view>
</v-app>
</template>
<script>
export default {
}
</script>
import UserPanel from 'Container/UserPanel';
const HomeV1 = () => import('Views/HomeV1');
const HomeV2 = () => import('Views/HomeV2');
const HomeV3 = () => import('Views/HomeV3');
export default{
path: '/',
component: UserPanel,
redirect:'/home',
children:[
{
path: '/',
component: HomeV1 ,
meta: {
header: 1
}
},
{
path: '/home',
component: HomeV1 ,
meta: {
header: 1
}
},
{
path: '/home-two',
component: HomeV2 ,
meta: {
header: 2
}
},
{
path: '/home-three',
component: HomeV3 ,
meta: {
header: 3
}
}
]
}
import Admin from 'Container/Adminpanel.vue';
const Reports = () => import('Views/AdminPanel/Reports.vue');
const Invoice = () => import('Views/AdminPanel/Invoices.vue');
const AdminAccount = () => import('Views/AdminPanel/Account.vue');
export default{
path: '/admin-panel',
component: Admin,
redirect:'/admin-panel/reports',
children:[
{
path: '/admin-panel/reports',
component: Reports,
name:'Reports'
},
{
path: '/admin-panel/invoices',
component: Invoice,
name:'Invoice'
},
{
path: '/admin-panel/products',
component: AdminProducts,
name:'AdminProducts'
}
]
}
import Vue from 'vue'
import Router from 'vue-router'
import userRoutes from './user';
import adminRoutes from './admin';
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
userRoutes,
adminRoutes
]
})
path: '/admin-panel/reports',
component: Reports,
name:'Reports',
meta: { template: 'admin' }