1 全局 我做了两种方法,一种是登录之后我可以获取到全部的菜单的信息,将获取的菜单信息做个处理,处理成标准的路有对象,然后在app.vue的created生命周期中动态添加; 个人觉得处理过程可能麻烦点,因为毕竟可能children里还有children,children里还有children...所以用到了递归,递归写不好的话,一不小心就会死循环... ...
component: () => import('@/views/my') }, { name: 'device-add', component: () => import('@/views/device/add') }, { name: 'device-list', component: () => import('@/views/device/list') }, { name: 'user-add', component: () => import('@/views/user/add') }, { name...
else { menu.push({ path: routerPath + r.path, name: r.code, meta: { title: r.name, icon: r.icon }, component: loadView(r.component) }); } }); return menu; } export function loadView(view) { // return import(`@/views/factoryManage/hazardZoning/classification/index.vue`); //...
path:"/user/:id", component: user }, ] constrouter =createRouter({ history:createWebHistory(process.env.BASE_URL), routes }) exportdefaultrouter; 点击User13或者User456都是导航至user组件。 3.2获取动态部分 组件中要显示不同部分的内容,也就是“你的名字”。 当整个vue-router 注入到根实例后,在...
component: ()=> import('@/view/404/index.vue'), name:'NotFound', meta: { title:'NotFound', hidden:true, icon:'el-icon-loading', }, }, {//任意路由path: '/:pathMatch(.*)*', redirect:'/404', name:'Any', meta: {
在Vue Router 中,可以通过在路由路径中使用冒号:来定义动态路由参数。例如,可以定义一个带有动态参数的路由路径如下: { path: "/user/:id", component: "User" } 在上面的示例中,:id 表示一个动态参数,表示用户的 ID。当用户访问/user/123 时,Vue Router 会将 123 作为参数传递给 User 组件。
才能显示相应的组件component. 但有时现实却不是这样的, 例如: 如下的需求: 当我们访问网站并登录成功后,它会显示 " 欢迎你,+ 你的名字" 。 不同的用户登录, 只是显示“你的名字” 部分不同,其它部分是一样的。 这就表示,它是一个组件,假设是user组件。不同的用户(就是用户的id不同),它都会导航到同一...
动态路由 除了基本的路由配置外,Vue Router还支持动态路由。通过在路径中使用占位符,我们可以创建带有参数的路由。 代码语言:markdown 复制 const routes = [ { path: '/user/:id', name: 'User', component: User } ] 在上述代码中,我们定义了一个名为User的路由,它的路径为/user/:id。id是一个占位符...
component: About } ]});在上面的例子中，我们首先导入了我们的组件和 vue-router，然后使用 Vue.use(Router) 注册插件，最后创建了一个新的 Router 实例并将其导出。现在我们来看一下创建路由时的一些重要概念。路由表：路由表是由多个路由对象组成的数组。每个路由对象定义了如何匹配 URL 和组件如何渲染。路径：...
component: () => import('../components/ChildB.vue'), /* 局部的路由钩子进入路由的时候触发 */ /* 因为同一个路径参数或者是动态路由,不会触发beforeEnter */ beforeEnter: (to, from, next) => { console.log('to',to); console.log('from',from); ...