i'm trying to make my content component dynamic.(using vue-router)
this is my code:
<template>
<div class="row mb-3" id="customer-panel">
<Breadcrumb></Breadcrumb>
<CustomerSidebar></CustomerSidebar>
<div class="col-lg-9">
<PersonalInfo></PersonalInfo>
</div>
</div>
</template>
any thing is fixed in all pages except PersonalInfo component.
and this is my route:
{
path: '/customer',
component: Profile,
redirect: '/customer/profile',
children: [
{
path: 'profile',
name: 'profile',
component: Profile
},
{
path: 'order',
name: 'order',
component: Order
},
]
}
what should i do?
i don't want to repeat my code and copy & past in another component.
i just want when i go to order route, Order component loaded instead of PersonalInfo.
what is the best way?
https://router.vuejs.org/guide/essentials/nested-routes.html
You can acheive your desired result with <router-view></router-view>
Any nested routes / children of your parent route will be rendered here, on route change.
Component:
<template>
<div class="row mb-3" id="customer-panel">
<Breadcrumb></Breadcrumb>
<CustomerSidebar></CustomerSidebar>
<div class="col-lg-9">
<router-view></router-view>
</div>
</div>
</template>
Routes:
{
path: '/customer',
component: Customer,
children: [
{
path: 'profile',
name: 'profile',
component: Profile
},
{
path: 'order',
name: 'order',
component: Order
},
]
}
If I understand correctly, you could try using dynamic component selection using the is attribute:
<template>
<div class="row mb-3" id="customer-panel">
<Breadcrumb></Breadcrumb>
<CustomerSidebar></CustomerSidebar>
<div class="col-lg-9">
<component is="currentComponent"></component>
</div>
</div>
</template>
And associate currentComponent variable to the name of the component you want to use in the current route.
{
path: '/customer',
component: Profile,
redirect: '/customer/profile',
children: [
{
path: 'profile',
name: 'profile',
components: { default: Profile, currentComponent: MyComponent1 }
},
{
path: 'order',
name: 'order',
component: {default: Order, currentComponent: MyComponent2 }
},
]
}
See:
https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components
https://router.vuejs.org/guide/essentials/passing-props.html
Related
I'm doing Router with Vue Js, but the thing I want to do is:
Sample:
domain.com/post/1
while the page is open,
again
I don't want it to switch to /post via the menu
Is there a way to prevent this
import Home from "./website/Home.vue";
import Post from "./website/Post.vue";
import PostDetail from "./website/PostDetail.vue";
export default [
{
path: '',
component: Home,
name: 'home',
},
{
path: 'post',
component: Post,
name: 'post',
children: [
{
path: ':id',
name: 'PostDetail',
component: PostDetail,
props: true
}
]
},
]
app.vue
<div>
<router-link to="/">Home</router-link>
<router-link to="/post">Post</router-link>
</div>
<router-view/>
post.vue
<div>
<router-link :to="{name: 'PostDetail', params: {id: 1}}"/>
</div>
<div class="child">
<router-view/>
</div>
postdetail.vue
<div>
Child Component
</div>
I have an object in Portfolio.vue like this:
data() {
return {
portfolio: {
front: [
{ description: '1. project ', src: require("../assets/sample.jpg"), slug: 'first'},
{ description: '2. project', src: require("../assets/sample.jpg"), slug: 'second' },
{ description: '3. project', src: require("../assets/sample.jpg"), slug: 'third' },
]
}
}
}
Portfolio.vue:
<div class="">
<div v-for="(data,index) in portfolio.front" :key="index">
<router-link :to="'/portfolio/'+data.slug"> <div class="element" :data-description="data.description">
<img :src="data.src " alt="">
</div>
</router-link>
</div>
</div>
PortfolioProduct.vue
<template>
<div>
<p>I want to take data to here. In here, i have to reach the data like this: portfolio.front.description</p>
</div>
</template>
<script>
export default {
props: {
},
}
</script>
My routes:
const routes = [
{
path: "/portfolio",
name: "Portfolio",
component: Portfolio,
},
{
path: "/portfolio/:id",
name: "PortfolioProduct",
component: PortfolioProduct,
props: true,
},
];
I want to take data from Portfolio.vue to PortfolioProduct.vue , i couldn't solve. I'm using vue js3 , if you help me i will be glad. Thank you
You could probably use the template literal, changing the router-link would be like so:
<router-link :to="`/portfolio/${data.slug}`"> <div class="element" :data-description="data.description">
I am trying to create a side menu (Dashboard's side menu with content) and I have to use multiple router-view.
First router-view is in App.vue that contains all the component.
<div id="app">
<router-view></router-view>
</div>
and the second router-view exists within above router-view as:
<div class="dashboard">
<Sidebar />
<div class="content">
<router-view name="content"></router-view>
</div>
</div>
According to below router/index.js code, if user visits / link, he will be redirected to dashboard page.
const routes = [
{
path: "",
name: "Dashboard",
component: dashboard,
},
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
{
path: "/profile",
name: "Profile",
components: {
content: Profile,
},
},
{
path: "/settings",
name: "Settings",
components: {
content: Settings,
},
},
{
path: "/dashboard",
name: "Overview",
components: {
content: Overview,
},
},
];
and within above Sidebar component, there're links that upon clicking it shows the content of that link on right side (as in dashboard):
<div class="sidebar">
<div class="title">
Simple Sidebar
</div>
<div class="menu-items">
<router-link to="" active-class="active" tag="button" exact class="side-btn">
<div class="link-container">
Overview
</div>
</router-link>
<router-link to="/messages" active-class="active" tag="button" exact class="side-btn">
<div class="link-container">
Messages
</div>
</router-link>
// ....
</div>
</div>
for the second router-view I added a name as :
<router-view name="content"></router-view>
and then I identified it in router/index.js as:
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
but it didn't work.
Can anyone help me debug and solve this issue, thank you in advance.
The nested route requires children route configs, which is missing from Dashboard's route config.
Move the route config of Messages into Dashboard's children array:
const routes = [
{
path: "",
name: "Dashboard",
component: dashboard,
children: [
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
]
},
//...
]
I got a problem with optional route params, that route param (id) is lost when I access the child component
this is my route config on the router
{
path: "route/:id?",
component: () => import("*****"),
props: true,
children: [
{
path: "/",
redirect: { name: "*****" }
},
{
path: "information",
component: () => import("****")
},
]
},
this is my route expected companies/1/description etc
is there something wrong with my code?
this is how I push the router
it shows success like that companies/1/information but if i go through to another child route.. this param is lost like companies/direction
If I understand it correctly you expect the <router-link> placed inside your Company component to somehow "inherit" route params from the current route automatically.
Unfortunately this is not how it works with optional params - it would work with non-optional params but optional params must be passed explicitly...
:to="{ name: link.routeName, params: { id: $route.params.id } }"
const companies = Vue.component('companies', {
template: `
<div id="app">
<router-link to="/companies/1">Company 1</router-link>
<router-link to="/companies/2">Company 2</router-link>
<router-view></router-view>
</div>
`
})
const company = Vue.component('company', {
props: ['id'],
template: `
<div id="app">
<h4> {{ id }} </h4>
<h4> {{ $route.fullPath }} </h4>
<router-link :to="{ name: 'adminBusinessProfileInformation', params: { id: $route.params.id } }">Information</router-link>
<router-link :to="{ name: 'adminBusinessProfileDescription', params: { id: $route.params.id } }">Description</router-link>
<router-view></router-view>
</div>
`
})
const child = Vue.component('child', {
template: `
<div>
Child component
</div>
`
})
const router = new VueRouter({
mode: 'history',
routes: [{
path: '/',
redirect: 'companies'
},
{
name: 'companies',
path: '/companies',
component: companies
},
{
path: '/companies/:id',
component: company,
props: true,
children: [{
path: "/",
redirect: {
name: "adminBusinessProfileInformation"
}
},
{
path: "information",
component: child,
name: "adminBusinessProfileInformation"
},
{
path: "description",
component: child,
name: "adminBusinessProfileDescription"
}
]
}
]
})
new Vue({
el: '#app',
router,
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<router-link to="/companies/1">Company 1</router-link>
<router-link to="/companies/2">Company 2</router-link>
<router-view></router-view>
</div>
I am new to Vuejs, I am looking to make my code effective just by having one vue component, and i want to specify the routing only once.
Currently i have one info.vue in a apps directive and prises.vue & priseshigh.vue in more directive. I want to have just one component in more directive. But the problem is in info.vue i have used two buttons, each button routes to prises.vue & priseshigh.vue respectively. Just like below code:
<vs-button class="btn" #click="$router.push({name: 'prises'}).catch(err => {})" >Go To</vs-button>
<vs-button class="btn" #click="$router.push({name: 'priseshigh'}).catch(err => {})" >Go There</vs-button>
My first question: So now i want to know, if i make one component as prisescomplete.vue by combining prises.vue & priseshigh.vue, how do i specify the routing to the buttons respectively in info.vue And what should i use in the prisescomplete.vue component to route the prises.vue & priseshigh.vue contents respectively .
My second question: below is my routing.js, so now what changes should i make in routing if i just have one component in views directive, and also with respect to first question.
{
path: '/apps/info',
name: 'info',
component: () => import('./views/apps/info/Info.vue'),
meta: {
rule: 'editor',
no_scroll: true
}
},
{
path: '/apps/info/info-more/prises-card',
name: 'prises',
component: () => import('./views/apps/info/more/prises.vue'),
meta: {
pageTitle: 'info-more',
rule: 'editor',
no_scroll: true
}
},
{
path: '/apps/info/info-more/priseshigh-card',
name: 'priseshigh',
component: () => import('./views/apps/info/more/priseshigh.vue'),
meta: {
pageTitle: 'info-more',
rule: 'editor',
no_scroll: true
}
},
Please send me the modified code, so that i can understand it easily.
You could pass props to route components.
https://router.vuejs.org/guide/essentials/passing-props.html
{
path: '/apps/info/info-more/prises-card',
name: 'prises',
component: () => import('./views/apps/info/more/prisescomplete.vue'),
props: {
prisesType: "prises"
},
meta: {
rule: 'editor'
}
},
{
path: '/apps/info/info-more/priseshigh-card',
name: 'priseshigh',
component: () => import('./views/apps/info/more/prisescomplete.vue'),
props: {
prisesType: "priseshigh"
},
meta: {
rule: 'editor'
}
}
PrisesComplete.vue
<template>
<div>
<span v-if="prisesType === 'prises'"> Prises </span>
<span v-else-if="prisesType === 'priseshigh'"> Prises High </span>
</div>
</template>
<script>
export default {
name: "PrisesComplete",
props: {
prisesType: {
type: String,
required: true
}
}
}
</script>
Also, you could use to="/path"
https://router.vuejs.org/guide/essentials/named-routes.html
<vs-button class="btn" :to="{ name: 'prises' }"> Go To </vs-button>
<vs-button class="btn" :to="{ name: 'priseshigh' }"> Go There </vs-button>
First of all you need to write a navigation.vue component for the navigation and render inside app with routerview. Look the codesandbox and the describtion
TheNavigation.vue
<template>
<div>
<vs-button
class="btn"
#click="$router.push({ name: 'prises' }).catch((err) => {})"
>Prises</vs-button
>
<vs-button
class="btn"
#click="$router.push({ name: 'priseshigh' }).catch((err) => {})"
>Priseshigh</vs-button
>
</div>
</template>
then render the navigation bar with the router view for loading the router.Here is the
App.vue where you render the navigation and routerview.
<template>
<div id="app">
<TheNavigation/>
<hr>
<RouterView/>
</div>
</template>
<script>
import TheNavigation from "./components/TheNavigation";
export default {
name: "App",
components: {
TheNavigation
}
};
</script>
RouterView is reponsible for loading the components which are defined inside router.js
Here is the Router.js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
const router = new Router({
mode: "history",
routes: [
{
path: "/prises-card",
name: "prises",
component: () => import("./components/Prises.vue"),
meta: {
pageTitle: "info-more",
rule: "editor",
no_scroll: true
}
},
{
path: "/priseshigh-card",
name: "priseshigh",
component: () => import("./components/PrisesHigh.vue"),
meta: {
pageTitle: "info-more",
rule: "editor",
no_scroll: true
}
}
]
});
export default router;