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>
Related
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 have a VueRouter with two levels:
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: HomeComponent
},
{
path: '/about',
name: 'About',
component: AboutComponent
children: [
{
path: 'plans',
name: 'Plans',
component: PlansComponent
},
},
]
The App.vue file has the following code:
<template>
<div>
<div>
<nav>
<template v-for="route in routes">
<div>
<router-link class="router-link" :key="route.path" :to="route.path">
{{route.name}}
</router-link>
<div v-for="child in route.children">
<router-link class="router-link router-link-child" :key="child.path" :to="{path: route.path + '/' + child.path}">
{{child.name}}
</router-link>
</div>
</div>
</template>
</nav>
</div>
<router-view></router-view>
</div>
</template>
My problem is that the menu is rendered correctly, but clicking the child item, the component which is rendered is its parent component.
What am I doing wrong?
This is the normal vue-router behavior : if you want the nested route to be rendered, you need to add a <router-view /> inside AboutComponent.
Exemple here : https://jsfiddle.net/yyx990803/L7hscd8h/
The User component contains the <router-view />
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
I'm using Vue CLI 3 and it makes a few routes. One is Home.vue. In my program I am trying to programmaticaly go to different pages. I added the routes I need in router.js but kept the already created routes for Home.vue and About.vue. It works fine until I get to 'Home' and get a warning: [vue-router] Route with name 'Home' does not exist.'
Here is the code:
<template>
<div class='secondItem'>
<h4 v-for="item in menuItems"
#click="bindMe(item)" v-bind:class="{'active':(item === current)}">{{item}}</h4>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
current: '',
menuItems: ['Home', 'About', 'Portfolio', 'Contact'],
}
},
methods: {
bindMe(item) {
this.current = item;
this.$router.push({
path: item
})
}
}
}
<script>
Are you using named routes? In that case you need to use name instead of path:
this.$router.push({
name: item
})
Also, your example can be simplified quite a lot. Try this:
<template>
<div class="secondItem">
<router-link :to="{ name: item }" tag="h4" active-class="active" v-for="item in menuItems" v-bind:key="item">{{item}}</router-link>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
menuItems: ['Home', 'About', 'Portfolio', 'Contact']
}
}
}
<script>