.router-link-exact-active class is not added to the active route when navigating to that route via this.$router.push(...).
For example:
// ...
this.$router.push('/?foo=bar');
Will not result in <router-link :to="'/'">Home</router-link> being assigned the .router-link-exact-active class.
Is this a bug, or an intended behaviour?
How should the active link be styled in this case?
P.S
This is a fiddle illustrating the issue: https://jsfiddle.net/alexlomm/dumeejyy/7/
May be you should use params or query separately and use query or params value as template data, As in below example
<router-link :to="{ path: '/', query: url_query }">home</router-link>
Check in docs
<script type="text/javascript" src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-router#2.7.0/dist/vue-router.js"></script>
<div id="app"></div>
<script type="text/javascript">
Vue.use(VueRouter)
const Home = {template: ''}
const router = new VueRouter({
mode: 'history',
routes: [
{path: '/', name: 'home', component: Home},
]
})
new Vue({
router,
template: `
<div id="app">
<p>Current path: {{ $route.fullPath }}</p>
<ul>
<li><router-link :to="{ path: '/', query: url_query }">home</router-link></li>
</ul>
</div>
`,
data:{
url_query:{}
},
mounted() {
this.url_query = { foo: 'bar' };
}
}).$mount('#app')
</script>
In your Fiddle
Related
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>
<router-link to="/" tag="a" :title="title">
<span class="icon icon-home i-large" />
<span class="class-2">Name</span>
</router-link>
This is what I have...
As you can see , I am using to prop. But I don't want to use it. Whenever someone clicks on this, i want to execute a function and use programatic navigation.
How is this possible? the structure and htmls that I have shouldn't change and it still should work as expected.
Something like this you mean?
<a #click="functionThatExecutesMyCode">
<span class="icon icon-home i-large" />
<span class="class-2">Name</span>
</a>
functionThatExecutesMyCode() {
this.$router.push({ to: 'newRoute'})
}
Else you should use the navigation guards: https://router.vuejs.org/guide/advanced/navigation-guards.html
I don't think it's possible to change :to props to add a function, because it is predefined as only accept a string in its docs. https://router.vuejs.org/api/#to
However, I suggest another way to implement what you want, you can add the logic in beforeEach hook. For example
router.beforeEach( (to, from, next) => {
// implement your logic here, for example if no internet, go to error page
if (!navigator.onLine && to.name !== "NetworkError") {
next({ name: "NetworkError" });
return false;
}
next();
}
For more info, look at their docs: https://router.vuejs.org/api/#router-beforeeach
It depends on what you exactly want.
There are easier solutions, like:
const Root = {
template: '<div>Root</div>'
}
const Route1 = {
template: '<div>Route1</div>'
}
const routes = [{
path: '/',
name: 'root',
component: Root
},
{
path: '/1',
name: 'route1',
component: Route1
}
]
const router = new VueRouter({
routes // short for `routes: routes`
})
new Vue({
el: "#app",
router,
data: {
selected: 'root',
options: ['root', 'route1']
}
})
<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">
<select v-model="selected">
<option v-for="(option, i) in options">
{{ option }}
</option>
</select>
<router-view></router-view>
<router-link :to="{ name: selected }">{{ selected }}</router-link>
</div>
In this solution I used a named route, and the "name" can be changed by the select input.
The next solution is to incorporate a function:
const Root = {
template: '<div>Root</div>'
}
const Route1 = {
template: '<div>Route1</div>'
}
const routes = [{
path: '/',
name: 'root',
component: Root
},
{
path: '/1',
name: 'route1',
component: Route1
}
]
const router = new VueRouter({
routes // short for `routes: routes`
})
new Vue({
el: "#app",
router,
data: {
selected: 'root',
options: ['root', 'route1']
},
methods: {
changeRouteName() {
return this.selected
}
}
})
<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">
<select v-model="selected">
<option v-for="(option, i) in options">
{{ option }}
</option>
</select>
<router-view></router-view>
<router-link :to="{ name: changeRouteName() }">{{ selected }}</router-link>
</div>
By adding a method to resolve the name of the component, it's possible to build ANY logic on the to of the <router-link. You could also use path instead of name of course - I just like named components.
It does not remove the click event from the to prop, but you can do your logic before returning the name it's "waiting" for.
I have buttons inside of a component. I am using vue router for vuejs 2.5 and I want to the path to simply change if I click this button. How do I make the path update whenever I click the button.
const Home = { template: '<div>Home <br> <button id="t2">Click Me</button><br><button>go back</button></div>' }
const Foo = { template: '<div>Foo<br this is a page</div>' }
const hello = {
template:'t1',
data(){
return {
}
}
}
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo }
]
})
new Vue({
router,
el: '#app',
data: {
msg: 'Hello World'
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<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="/">/home</router-link>
<router-link to="/foo">/foo</router-link>
<router-view></router-view>
<script type="text/x-template" id="t1">
<button>hello</button><br>
</script>
</div>
You can simple add a click listener to the button:
<template>
<div id="app">
<button #click="redirectToHome()">Go Back</button>
<button #click="redirectToFoo()">Click ME</button>
</div>
</template>
and implement them inside methods
<script>
export default {
name: "#app",
methods: {
redirectToHome() {
this.$router.push({ path: '/' });
},
redirectToFoo() {
this.$router.push({ path: '/foo' });
}
}
};
</script>
For further details on programmatic navigation:
https://router.vuejs.org/guide/essentials/navigation.html#programmatic-navigation
You can use the "to" prop of vue-route https://router.vuejs.org/api/#to
And on tag prop you must set button value for to render button
https://router.vuejs.org/api/#tag
<router-link
to="/foo"
tag="button">
foo
</router-link>
I'm trying to figure out how child routes in VueJS work. I would think that if I had a news overview with links to each news item, I could then use a child route to view the news item, but it doesn't works as I expects.
Is it me that is doing it wrong or?
const router = new VueRouter({
routes: [
{
path: '/news',
name: 'news',
component: News,
children: [
{
path: ':id',
name: 'newsitem',
component: Newsitem
}
]
}
]
});
I have created a jsfiddle to show how I would expect it to work.
If I uncomment the router in the javascript, then it works fine, but not with children.
Like Moersing.Lin said you forgot to put a <router-view> in your News Component.
Here is an working example of your fiddle:
const News = {
template: `<div>
<h1>News</h1>
<br><br>
<router-view></router-view>
</div>
`
}
const Newsitem = {
template: "<h2>News {{this.$route.params.id}}</h2>"
}
const router = new VueRouter({
routes: [{
path: '/news',
name: 'news',
component: News,
children: [{
path: ':id',
name: 'newsitem',
component: Newsitem,
}]
}]
});
new Vue({
el: '#app',
router,
}).mount('#app');
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<ul>
<li>
<router-link :to="{ name: 'news'}">News list</router-link>
</li>
<li>
<router-link :to="{ name: 'newsitem', params: { id: 'item-1' }}">Item 1</router-link>
</li>
<li>
<router-link :to="{ name: 'newsitem', params: { id: 'item-2' }}">Item 2</router-link>
</li>
</ul>
<router-view></router-view>
</div>
I got it, A Vue Router is required <router-view></router-view>,but in your code, The root component is there, but you forgot the parent,it needs a <router-view></router-view> too.
https://jsfiddle.net/v28yw3g5/
const News = {
template: `<div>
<h1>News</h1>
<br><br>
<router-view></router-view>
</div>
`
}
const Newsitem = {
template: "<h2>News {{this.$route.params.id}}</h2>"
}
const router = new VueRouter({
routes: [{
path: '/news',
name: 'news',
component: News,
children: [{
path: ':id',
name: 'newsitem',
component: Newsitem,
}]
}]
});
new Vue({
el: '#app',
router,
}).mount('#app');
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<ul>
<li>
<router-link :to="{ name: 'news'}">News list</router-link>
</li>
<li>
<router-link :to="{ name: 'newsitem', params: { id: 'item-1' }}">Item 1</router-link>
</li>
<li>
<router-link :to="{ name: 'newsitem', params: { id: 'item-2' }}">Item 2</router-link>
</li>
</ul>
<router-view></router-view>
</div>
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>