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 />
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 am Korean, so I hope you could understand it with my awkward English skills
I am studying about vue and router and i face to some problem
here is my source code
{path: '/conference-detail/:id/:Step', component: () => import('..), props: true, children:
[
{path: '/conference-detail/:id/:Step/step1', name: 'StepOne', component: () => import('..')},
{path: '/conference-detail/:id/:Step/step2', name: 'StepTwo', component: () => import('..')},
{path: '/conference-detail/:id/:Step/step3', name: 'StepThree', component: () => import('..')},
{path: '/conference-detail/:id/:Step/step4', name: 'StepFour', component: () => import('..')},
]},
<template v-for="(item, index) in processList">
<router-link
:to="{name: item.name}"
:key="index"
v-text="item.text"
class="step"
active-class="active"
/>
</template>
<router-view/>
I want to get url without "step1, step2..." in children path when I get out of children component
just like "/conference-detail/:id/:Step"
I think its like removing child component from parent component..
I hope you get it what I am want to try
I think there is a problem in the last two lines :
<template v-for="(item, index) in processList">
<router-link
:to="{name: item.name}"
:key="index"
v-text="item.text"
class="step"
active-class="active"
/>
</router-view>
</template>
I have this default vue navbar which I want to make it more dynamic by using v-for.
Before changes, this is the code:
<template>
<div>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
</template>
After changes, this is the code:
<template>
<div>
<div v-for="navbar in navbars" :key="navbar.id">
<router-link :to="navbar.router">{{ navbar.names }}</router-link>
</div>
</div>
</template>
<script>
export default {
name: "Header",
navbars: [
{ names: "Home", router: "/" },
{ names: "About", router: "/About" }
]
};
</script>
But after converted it, the navbar doesn't show up. Anything I miss out?
You need to define navbars as a data of the component using data
<template>
<div>
<div v-for="navbar in navbars" :key="navbar.id">
<router-link :to="navbar.router">{{ navbar.names }}</router-link>
</div>
</div>
</template>
<script>
export default {
name: "Header",
data: function () {
return {
navbars: [
{ names: "Home", router: "/" },
{ names: "About", router: "/About" }
]
}
}
};
</script>
I create router-links with a v-for where I pass params props so I can access them in my router-view. Now I need to have my route props available when a route is accessed other ways than clicking the link, like navigating with $router.go or external URL. How can I pull/sync this data from the existing router-links?
<router-link
v-for="item in items"
:to="{
name: 'Item',
params: {
url: `${item.no}-${item.title.replace(/\s+/g, '-')}`,
no: item.no,
title: item.title
}
}">
{{item.no}}
{{item.title}}
</router-link>
Inside the Item component:
<article :key="no">
<h1> {{ no }} {{ title }} </h1>
</article>
The route:
export default new Router({
routes: [
{
path: '/:url',
name: 'Item',
component: Item,
props: true
}
]
})
I guess the simplest solution is to include the props I need to render in the URL.
<router-link
v-for="item in items"
:to="{
name: 'Item',
params: {
no: item.no,
title: item.title.replace(/\s+/g, '-')
}
}">
{{item.no}}
{{item.title}}
</router-link>
Breaking down the URL like this:
export default new Router({
routes: [
{
path: '/:no/:title',
name: 'Item',
component: Item,
props: true
}
]
})
This way these props
<article :key="no">
<h1> {{ no }} {{ title }} </h1>
</article>
will be available without accessing the route through the link directly.
I have this anchor in Parent.vue:
<a v-link="{ path: '/somepath/somesubpath', query: { messageId: 999}}"> Here </a>
or also this
<a v-link="{ path: '/somepath/somesubpath', params: { messageId: 999}}"> Here </a>
My Child.vue is like this:
<template>
{{messageId}}
// other html..
</template>
<script>
export default {
props: ['messageId']
}
</script>
In Child.vue I can not see the value of {{messageId}} being rendered. This means that the value is not getting passed.
I am using vue router 0.7.5 and the docs here do not specify how to specify params in v-link (without named routes).
So whats the proper way to pass in params using vue router with v-link?
Route params are available in the this.$route.params property. They do not need to be passed as a component property.
In your case you can access the messageId param in your template like so:
{{ $route.params.messageId }}
However, you also need to make sure that the template for your Child.vue component has a single root element and not just text. Otherwise, the component will not render.
So, you'd at least need something like this:
<template>
<div>
{{ $route.params.messageId }}
</div>
</template>
Here's a simple example:
Vue.component('child', {
template: `
<div>
message id: {{ $route.params.messageID }}
</div>
`
});
const Home = {
template: '<div>Home</div>'
};
const Message = {
template: `
<div>
<span>Message View</span>
<child></child>
</div>
`
};
const router = new VueRouter({
routes: [
{ path: '/', component: Home, name: 'home' },
{ path: '/message', component: Message, name: 'message' }
]
})
new Vue({
router,
el: '#app'
})
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<router-link :to="{ name: 'home' }">home</router-link>
<router-link :to="{ name: 'message', params: { messageID: 123 } }">message view</router-link>
<router-view></router-view>
</div>