i wanna product new menu i try Recursive dictionary array
but still not get correct datas.
below its two array , globalRoutes its dict array , menuRoutes its normal array i wanna use
menuRoutes to search globalRoutes
below its my code:
const globalRoutes = [
{
path: '/user',
meta: {
title: 'UserManager',
icon: 'el-icon-user'
},
children: [{
path: 'userinfo',
meta: {
title: 'UserInfo',
}
},
{
path: 'roleinfo',
meta: {
title: 'Roleinfo'
}
},
{
path: 'rolemenu',
meta: {
title: 'roleMenu'
}
}
]
},
{
path: '/test',
meta: {
title: 'TestMenu',
icon: 'el-icon-setting'
}
}
]
const menuRoutes = ['userinfo', '/test']
function Test1(routes) {
res = []
for(let route of routes){
console.log(route.path)
const data = {}
let menuIndex = menuRoutes.indexOf(route.path)
if(menuIndex > -1){
data.path = route.path
data.meta = route.meta
}else{
if(route.children){
data.path = route.path
data.meta = route.meta
data.children = Test1(route.children)
}
}
if (Object.keys(data).length > 0){
res.push(data)
}
}
return res
}
console.log(Test1(globalRoutes))
Error datas as below:
[
{ path: 'userinfo', meta: { title: 'UserInfo' } },
{
path: '/user',
meta: { title: 'UserManager', icon: 'el-icon-user' },
children: [Circular]
},
{
path: '/test',
meta: { title: 'TestMenu', icon: 'el-icon-setting' }
}
]
I wanted correct data as below:
[
{
path: '/user',
meta: { title: 'UserManager', icon: 'el-icon-user' },
children: [{ path: 'userinfo', meta: { title: 'UserInfo' } }]
},
{
path: '/test',
meta: { title: 'TestMenu', icon: 'el-icon-setting' }
}
]
how need i change code to get correct datas?
Here is simple example based on your code.
const globalRoutes = [
{
path: '/user',
meta: {
title: 'UserManager',
icon: 'el-icon-user'
},
children: [{
path: 'userinfo',
meta: {
title: 'UserInfo',
}
},
{
path: 'roleinfo',
meta: {
title: 'Roleinfo'
}
},
{
path: 'rolemenu',
meta: {
title: 'roleMenu'
}
}
]
},
{
path: '/test',
meta: {
title: 'TestMenu',
icon: 'el-icon-setting'
}
}
];
const menuRoutes = ['userinfo', '/test'];
const inRoutes = (search, routes) => {
let result = [];
routes.forEach((item, index) => {
if (search.includes(item.path)) {
result.push(item);
}
if (item.children) {
item.children.forEach((itm, idx) => {
if (search.includes(itm.path)) {
item.children = item.children.filter(i => i === itm); // or item.children = [itm];
result.push(item);
}
});
}
});
return result;
};
console.log(inRoutes(menuRoutes, globalRoutes));
Hope this helps.
Related
Using Vue3 - Vuerouter4 - Vite
I try to import the components and routes in vue router but I face this error (only for the route that has children in my paths):
my router code:
import { createRouter, createWebHistory } from "vue-router";
import paths from "./path";
import { TokenService } from "#/services/storage.services.js";
function route(options) {
let path = options.path;
let view = options.view;
let name = options.name;
let meta = options.meta ? options.meta : "";
let children = options.children ? options.children : null;
let redirect = options.redirect ? options.redirect : null;
let currentRoute = {
name: name || view,
path,
meta,
component: (resolve) => import(`#/views/${view}.vue`).then(resolve),
};
if (children && Array.isArray(children)) {
children = children.map((path) => {
path.view = view + "/" + path.view;
return path;
});
currentRoute["children"] = children.map((path) => route(path));
}
if (redirect) {
currentRoute["redirect"] = redirect;
}
return currentRoute;
}
// Create a new router
const router = createRouter({
history: createWebHistory(),
routes: paths
.map((path) => route(path))
.concat([{ path: "/:pathMatch(.*)", redirect: "admin/home" }]),
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
if (to.hash) {
return { selector: to.hash };
}
return { left: 0, top: 0 };
},
});
export default router;
my paths that are in paths.js:
export default [
{
path: "/admin",
name: "Admin",
view: "Admin",
redirect: "Admin/Home",
children: [
{
path: "Home",
name: "Home",
view: "Home",
meta: {
auth: true,
title: "داشبورد",
},
},
{
path: "TRANSACTION",
name: "TRANSACTION",
view: "Transaction",
meta: {
auth: true,
title: "تراکنش ها",
},
},
{
path: "SMS-MANAGEMENT",
name: "SMSManagement",
view: "SMSManagement",
meta: {
auth: true,
title: "مدیریت پیامک ها",
},
},
{
path: "CAR-LIST",
name: "CAR-LIST",
view: "Car-List",
meta: {
auth: true,
title: "لیست خودرو های اجاره ای",
},
},
{
path: "ADDRENTCAR",
name: "ADDRENTCAR",
view: "AddRentCar",
meta: {
auth: false,
title: "افزودن خودرو اجاره ای",
},
},
{
path: "EDITRENTCAR",
name: "EDITRENTCAR",
view: "AddRentCar",
meta: {
auth: false,
title: "ویرایش خودرو اجاره ای",
},
},
{
path: "USERS",
name: "USERS",
view: "Users",
meta: {
auth: true,
title: "لیست کاربران",
},
},
{
path: "CARS",
name: "CARS",
view: "Cars",
meta: {
auth: true,
title: "لیست خودرو ها",
},
},
{
path: "REQUESTS",
name: "REQUESTS",
view: "REQUESTS",
meta: {
auth: true,
title: "لیست درخواست ها",
},
},
],
},
{
path: "",
name: "MAIN-HOME",
view: "main-home",
meta: {
auth: true,
title: "صفحه اصلی",
public: true,
},
},
{
path: "/PROFILE",
name: "PROFILE",
view: "PROFILE",
meta: {
auth: true,
title: "پروفایل من",
},
},
{
path: "/LOGIN",
name: "LOGIN",
view: "Login",
meta: {
auth: true,
title: "ورود",
},
},
{
path: "/ALLCARS",
name: "ALLCARS",
view: "ALLCARS",
meta: {
public: true,
auth: true,
title: "لیست تمام خودرو ها",
},
},
{
path: "/ABOUTUS",
name: "ABOUTUS",
view: "ABOUTUS",
meta: {
public: true,
auth: true,
title: "درباره ما",
},
},
];
Any ideas what causes the error specifically for my admin route that has children??!!
........................................................................................................................................................................................................................................................................................................................................................................................................................................................................
I changed the "../views/" to "/src/views/" and problem solved.
Seems like using '..' wouldn't make it to the src folder!!!!!
Thank you #Mohammad Masoudi
I tried to modify the routing configuration problem, but the breadcrumbs have two identical user lists, the error is displayed as 首页 / 系统设置 / 用户列表 / 用户列表. For example, when the left menu clicks on the user list, it should display correctly 首页 / 系统设置 / 用户列表.
The error is displayed as:
Displayed correctly as:
router.config.js
{
path: '/settings',
name: 'settings',
component: RouteView,
redirect: '/settings/user',
meta: { title: '设置系统', keepAlive: true, icon: bxAnaalyse },
children: [
{
path: '/settings/user',
name: 'user',
component: RouteView,
redirect: '/settings/user/list',
meta: { title: '用户列表', keepAlive: false },
hideChildrenInMenu: true,
children: [
{
path: '/settings/user/list',
name: 'user',
component: () => import('#/views/settings/user/index'),
meta: { title: '用户列表', keepAlive: false }
},
{
path: '/settings/user/add',
name: 'add',
component: () => import('#/views/settings/user/add'),
meta: { title: '新增用户', keepAlive: true, hidden: true }
}
]
},
]
},
components/tools/Breadcrumb.vue
<template>
<a-breadcrumb class="breadcrumb">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
<router-link
v-if="item.name != name && index != 1"
:to="{ path: item.path === '' ? '/' : item.path }"
>{{ item.meta.title }}
</router-link>
<span v-else>{{ item.meta.title }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
</template>
<script>
export default {
data () {
return {
name: '',
breadList: []
}
},
created () {
this.getBreadcrumb()
},
methods: {
getBreadcrumb () {
this.breadList = []
// this.breadList.push({name: 'index', path: '/', meta: {title: '首页'}})
this.name = this.$route.name
this.$route.matched.forEach(item => {
// item.name !== 'index' && this.breadList.push(item)
this.breadList.push(item)
})
}
},
watch: {
$route () {
this.getBreadcrumb()
}
}
}
</script>
<style scoped>
</style>
Why would you redirect '/settings/user' to '/settings/user/list'? The extra "用户列表"
in the breadcrumb comes from the title of '/settings/user/list'.
I suggest you delete the '/settings/user/list' item and the 'redirect' attribute of '/settings/user'.
I have a problem when trying to make breadcrumb with vuejs, when the routes do not have parameters, it works, but for those routes that need a parameter, I do not know how to have the parameter in breadcrumb
Routes
{
path: '/',
component: () => import('#/components/kit/index'),
name: 'Home',
meta: {
requiresAuth: false,
visibleAfterLogin: true,
breadcrumb: [
{ name: 'Home' }
]
}
},
{
path: '/',
component: () => import('#/pages/kit/Layout'),
children: [
{
path: 'otherouter/:name',
name: 'Other',
components: {
default: () => import('#/components/kit/Other1'),
sidebar: () => import('#/components/kit/Sidebar')
},
meta: {
requiresAuth: false,
visibleAfterLogin: true,
breadcrumb: [
{ name: 'Home', link: 'Home' },
{ name: 'Other' }
]
}
},
{
path: 'studybook/:book',
name: 'Kit',
components: {
default: () => import('#/components/kit/TypeTrails'),
sidebar: () => import('#/components/kit/Sidebar')
},
meta: {
requiresAuth: false,
visibleAfterLogin: true,
breadcrumb: [
{ name: 'Home', link: 'Home' },
{ name: 'Trilhas', link: 'Other' },
{ name: 'Caderno de estudo' }
]
}
}
]
}
Breadcrumb.vue
<template>
<ul class="breadcrumbs">
<li v-for="(item, index) in breadcrumbList" :key="item.name">
<icon name="breadcrumb" size="13px" v-if="index === 0" #click="to(item)" />
{{item.name}}
<strong v-else>{{item.name}}</strong>
</li>
</ul>
</template>
<script>
export default {
data(){
return{
breadcrumbList: []
}
},
mounted(){
this.breadcrumbList = this.$route.meta.breadcrumb
},
watch: {
'$route' (){
this.breadcrumbList = this.$route.meta.breadcrumb
}
},
methods: {
to(item){
if(item.link){
this.$router.push({name: item.link})
}
}
}
}
</script>
maybe too late but you can achieve this making the breadcrumb a function receiving the route object for example:
// router file
{
path: '/items/:id',
...,
meta: {
breadcrumb: (route) => ([
{
name: 'My Items Index view',
to: { name: 'ItemIndex' }
},
{
name: 'My Item Detail view',
to: {
name: 'ItemDetail',
params: { id: route.params.id }
}
}
])
}
}
// app-bar or similar file
export default {
name: 'AppBar',
computed: {
breadcrumb() {
return this.$route.meta.breadcrumb(this.$route)
}
}
}
I have the following:
children: [
{
name: 'test',
path: 'test',
meta: {
label: 'test',
link: 'test'
},
component: lazyLoading('test/basic')
},
{
name: 'test',
path: 'test',
meta: {
label: 'test',
link: 'test'
},
component: lazyLoading('test/Basic')
},
{
name: 'test',
path: 'test',
meta: {
label: 'test',
link: 'test'
},
component: lazyLoading('test/Basic')
}
]
I want to follow this structure, but programmatically create each dictionary using each record returned from an API call.
example api call
function getData() {
axios.get(Url + input.value)
.then(function (response) {
json_data = response.data;
});
}
so in python this would probably look something like:
test_list=[]
for item in json_data:
dict = {
name: item.name
path: item.path
meta: {
label: item.label,
link: item.link,
},
component: lazyLoading('testitem/basic')
},
test_list.append(dict)
children: test_list
How can I accomplish this in javascript? I'm having a real hard time learning javascript after doing python.
UPDATE:
This is the full code block that I am working with.
export default {
name: 'test',
meta: {
icon: 'fa-android',
expanded: false
},
children: [
{
name: 'test',
path: 'test',
meta: {
label: 'test',
link: 'test'
},
component: lazyLoading('test/Basic')
}
]
}
You were very close:
const children = [];
json_data.forEach(item => {
const dict = {
name: item.name,
path: item.path,
meta: {
label: item.label,
link: item.link,
},
component: lazyLoading('testitem/basic'),
}
children.push(dict);
});
I'm having trouble running my Vue.js application on a server. It works fine when I'm running locally on macOS or windows. This is the error I get when running 'npm run dev':
These dependencies were not found:
* #/components/account/Profile in ./src/router/index.js
* #/components/account/Plan in ./src/router/index.js
* #/components/account/Team in ./src/router/index.js
* #/components/account/Integration in ./src/router/index.js
* babel-runtime/helpers/extends in ./src/store/index.js
I have checked that the same version of Vue.js is installed -> vue#2.5.13 + really have no clue how to fix this problem. I'm guessing it's a dependency/OS error because it runs with no errors locally.
Does anyone know to fix this or point me somewhere useful? Any help is hugely appreciated!
Edit***
Contents of Index.js below - I'm using Webpack.
import store from '../store'
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/components/Home'
import Error404 from '#/components/404'
import Login from '#/components/Login'
import Register from '#/components/Register'
import FreeTrial from '#/components/FreeTrial'
import Product from '#/components/Product'
import Services from '#/components/Services'
import Team from '#/components/Team'
import Pricing from '#/components/Pricing'
import Help from '#/components/Help'
import SharedList from '#/components/SharedList'
import ListView from '#/components/App/ListView'
import Blog from '#/components/Blog'
// Account components, loaded lazily
const AccountSettings = r =>
require.ensure([], () => r(require('#/components/AccountSettings')), 'accountComponents')
const ProfileSection = r =>
require.ensure([], () => r(require('#/components/account/Profile')), 'accountComponents')
const PlanSection = r =>
require.ensure([], () => r(require('#/components/account/Plan')), 'accountComponents')
const TeamSection = r =>
require.ensure([], () => r(require('#/components/account/Team')), 'accountComponents')
const IntegrationSection = r =>
require.ensure([], () => r(require('#/components/account/Integration')), 'accountComponents')
// App components loaded lazily, grouped by the 'appComponents' param
const MainApp = r =>
require.ensure([], () => r(require('#/components/MainApp')), 'appComponents')
const Default = r =>
require.ensure(
[],
() => r(require('#/components/App/Default')),
'appComponents'
)
const Search = r =>
require.ensure(
[],
() => r(require('#/components/App/Search')),
'appComponents'
)
const Templates = r =>
require.ensure(
[],
() => r(require('#/components/App/Templates')),
'appComponents'
)
const Lists = r =>
require.ensure(
[],
() => r(require('#/components/App/Lists')),
'appComponents'
)
const Outreach = r =>
require.ensure(
[],
() => r(require('#/components/App/Outreach')),
'appComponents'
)
import { Message } from 'element-ui'
Vue.use(Router)
export const router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '*',
name: '404',
meta: { title: `Page not found` },
component: Error404
},
{
path: '/help',
name: 'Help',
meta: { title: `Help` },
component: Help
},
{
path: '/product',
name: 'Product',
meta: { title: `Product` },
component: Product
},
{
path: '/services',
name: 'Services',
meta: { title: `Services` },
component: Services
},
{
path: '/team',
name: 'Team',
component: Team
},
{
path: '/pricing',
name: 'Pricing',
meta: { title: `Pricing` },
component: Pricing
},
{
path: '/blog',
name: 'Blog',
meta: { title: `Blog` },
component: Blog
},
{
path: '/login',
name: 'Login',
meta: { title: `Login` },
component: Login
},
{
path: '/register',
name: 'Register',
meta: { title: `Register` },
component: Register
},
{
path: '/trial',
name: 'FreeTrial',
meta: { title: `Free trial` },
component: FreeTrial
},
{
path: '/viewlist/:id',
name: 'SharedList',
meta: { title: `View shared list` },
component: SharedList
},
{
path: '/app',
component: MainApp,
beforeEnter (from, to, next) {
if (store.getters.getUserStatus.loggedIn) {
next()
} else {
Message({
message: `You can't access the app because you're not logged in`,
type: 'error'
})
next({ name: 'Login' })
}
},
children: [
{
path: '/account',
component: AccountSettings,
beforeEnter (from, to, next) {
if (store.getters.getUserStatus.loggedIn) {
next()
} else {
Message({
message: `You can't access your profile because you're not logged in. Please log in again`,
type: 'error'
})
next({ name: 'Login' })
}
},
children: [
{
path: '',
name: 'ProfileSection',
meta: { title: `Edit profile` },
component: ProfileSection
},
{
path: 'plan',
name: 'PlanSection',
meta: { title: `Manage plan` },
component: PlanSection
},
{
path: 'team',
name: 'TeamSection',
meta: { title: `Manage team` },
component: TeamSection
},
{
path: 'integration',
name: 'IntegrationSection',
meta: { title: `Integration` },
component: IntegrationSection
}
]
},
{
path: '',
name: 'AppDefault',
meta: { title: `Explore saphire` },
component: Default
},
{
path: 'search',
name: 'AppSearch',
meta: { title: `Search influencers` },
component: Search
},
{
path: 'templates',
name: 'AppTemplates',
meta: { title: `Manage templates` },
component: Templates
},
{
path: 'lists',
name: 'AppLists',
meta: { title: `Manage lists` },
component: Lists
},
{
path: 'list/:id',
name: 'ListView',
meta: { title: `View list` },
component: ListView
},
{
path: 'outreach',
name: 'AppOutreach',
meta: { title: `Outreach` },
component: Outreach
}
]
}
]
})
router.beforeEach((to, from, next) => {
// Change title based on meta.title property
if (to.meta.title) {
document.title = `saphire | ${to.meta.title}`
} else {
document.title = `saphire`
}
// Checking if inside or outside app and assigning the result to global store variable
if (to.matched.length > 0) {
to.matched[0].path === '/app'
? store.commit('setAppState', true)
: store.commit('setAppState', false)
}
next()
})
export default router