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)
}
}
}
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
How can I have a route outside of navigation guards, to access it directly through an external url, without redirecting me to the login route.
The problem is for the password recovery page in which the user does not need to be logged in, if I go to the url https://my-site/recover-password, immediately redirected to the login page.
This is my code in router:
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home,
meta: {
user_type: 1
}
},
{
path: '/check-balance',
name: 'check-balance',
component: CheckBalanceComponent,
meta: {
user_type: 1
}
},
{
path: '/check-payment',
name: 'check-payment',
component: CheckPaymentsComponent,
meta: {
user_type: 1
}
},
{
path: '/payment-disabled',
name: 'payment-disabled',
component: DisabledMakePaymentComponent,
meta: {
user_type: 1
}
},
{
path: '/handle-payment',
name: 'handle-payment',
component: HandlePaymentsComponent,
meta: {
user_type: 1
}
},
{
path: '/handle-report',
name: 'handle-report',
component: HandleReportsComponent,
meta: {
user_type: 1
}
},
{
path: '/user-profile',
name: 'user-profile',
component: UserProfileComponent,
meta: {
user_type: 1
}
},
{
path: '/recover-password',
name: 'recover-password',
component: RecoverPasswordComponent,
meta: {
libre: 1
}
},
{
path: '/recover-link',
name: 'recover-link',
component: RecoverLinkComponent,
meta: {
libre: 1
}
},
{
path: '/login',
name: 'login',
component: LoginComponent,
meta: {
libre: 1
}
},
{
path: '/help',
name: 'help',
component: HelpComponent,
meta: {
user_type: 1
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next) => {
if(to.matched.some(record => record.meta.libre)){
next()
}
else if(store.state.user && store.state.user.user_type == 1){
next()
}
else {
next({
name: 'login'
})
}
})
export default router
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.
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'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