This is how the route is used in template Component.vue:
<router-link :to="{ name: 'club' }">
<lazy-image
src="club.jpg"
class="club_class"
alt="Club alt"
/>
</router-link>
And this is how it's defined in router.js:
const routes = [
{
path: '/s/site',
name: 'club',
component: () => import('./_pages/Club'),
},
];
export default routes;
I need to add a just a static parameter to the link like this:
'?foo=bar'
I tried to hardcode that in Component.vue but it didn't work. Shoud I define it in router.js as param or somewhere else?
Use this code:
<router-link :to="{name: 'club', query: {param1: 'value1', param2: 'value2'}}">go</router-link>
Related
I can send static props via <router-link> like so:
parent-component:
<router-link :to="{name: 'child-component'}"></router-link>
child-component:
<template>
<h1>{{ test }}</h1>
</template>
<script setup>
import {defineProps} from "vue";
const props = defineProps({
test: String
})
</script>
router.js:
const router = createRouter({
routes: [
{path: "/child-component", name: "child-component", component: ChildComponent, props: {test: 'hello world'}},
]
});
This correctly displays hello world in the h1 element in child-component. But how do I pass a dynamic element, say a state or prop (parent) through the route?
I've tried:
<router-link :to="{name: 'child-component'}" :props="{test: 'did this come through?'}"></router-link>
or
<router-link :to="{name: 'child-component'}" :test="'did this come through?'"></router-link>
But I don't know what to put instead of hello world:
const router = createRouter({
routes: [
{path: "/child-component", name: "child-component", component: ChildComponent, props: {test: 'hello world'}},
]
});
Here it is,
Router link
<router-link
:to="{
name: 'child-component',
params: { id: id, name: name },
}" >test
</router-link>
// Id and name are dynamic value
route.js file
const router = createRouter({
routes: [
{path: "/child-component/:id/:name", name: "child-component", component: ChildComponent},
]
})
You can access the params at the child component
<span>Name: {{ $route.params.name }} Id: {{ $route.params.id }}
</span>
I'm trying to pass props from one page to another with a redirect. Here's the code for the redirect:
<router-link :to="{ name: 'shipment', params: { editedItems: getSelected() } }">
Edit Amount
</router-link>
And here's the original code for the route in router:
{
path: "/inventory/shipment",
name: "shipment",
props: { screen: "shipment" },
component: Inventory,
},
As can be seen, I want to also pass a set variable, being screen, all the time. The route, shipment, can be called with router-link or through other methods. I know by setting props: true on the route it allows me to get the props sent via the redirect, but it doesn't allow me to pass the screen prop if router-link isn't called. What I'm looking for is the best of both worlds, being able to send both props.
Side note: I know I can easily get the prop on the page by looking at the url, but learning how to do a method like this will be helpful in the future when I don't have an easy out.
With Vue router you can access both information (props and params), just use a different pattern to get it:
const MainView = {
template: `<div>MAIN VIEW: click on TO INVENTORY to see data passed</div>`
}
const Inventory = {
props: ['screen'],
computed: {
routeParams() {
return Object.entries(this.$route.params).map(e => {
return `${e[0]}: ${e[1]}`
}).join(', ')
}
},
template: `
<div>
INVENTORY<br />
prop: {{ screen }}<br />
editedItems: {{ $route.params.editedItems }}<br />
all params: {{ routeParams }}
</div>
`
}
const router = new VueRouter({
routes: [{
path: '/',
name: "main",
component: MainView
}, {
path: '/inventory/shipment',
name: "shipment",
props: {
screen: "shipment"
},
component: Inventory
}]
})
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="{ name: 'shipment', params: { editedItems: 'someitem' } }">TO INVENTORY</router-link>
<router-link :to="{ name: 'main' }">TO MAIN</router-link>
<router-view></router-view>
</div>
I'm trying to develop a simple website using vue js and so far it goes well but I'm facing the following Issue:
I'm using a router to change pages, it works, but what I need to do is: Change Page & scroll to a specific anchor.
What I tried already:
Works well:
Route to contact page or home
<router-link to="/contact">Contact</router-link>
<router-link to="/">Home</router-link>
Doesn't work:
<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>
The last one works only if I'm on the home page, but whenever I change to Contact Page and try to route to "/#technology" it won't work. It does try routing to "http://example.com/contact/#technology" instead of "http://example.com/#technology".
If I do it like that, it will just scroll to top, but not to the anchor:
<router-link to="/#technology" Technology</router-link>
My Router Code:
const routes = [
{ path: '/', component: Home },
{ path: '/contact', component: Contact }
]
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}
if (to.hash) {
return { selector: to.hash };
}
return { x: 0, y: 0 }
},
});
new Vue({
router,
}).$mount('#app');
And the templates look like this ( I did remove the unnecessary code):
<template id="home">
<div>
Home
<div id="technology"> <!-- IT SHOULD SCROLL TO HERE -->
</div>
</template>
<template id="contact">
<div>
Contact Page
</div>
</template>
i think you are on the right path.
but maybe you have mistaken the usage of Route name and path.
instead of
<router-link :to="{ name: '/', hash: '#technology' }" >Technology</router-link>
try using path instead of name
<router-link :to="{ path: '/', hash: '#technology' }" >Technology</router-link>
How can I pass an image as prop in a vue-router tag ?
I have :
<router-link :to="{path: '/details', query: {
name: 'item',
//...
}}">
</routerlink
while in my "details" component I have :
<template>
<img :src="url">
</template>
<script>
export default {
name:'child-img',
props:['url'],
data() {
return {
}
}
}
</script>
So it's a case of passing props to your route which you have to set up in your router.
const router = new VueRouter({
routes: [
{ path: '/details/:url', component: Details, props: true },
// ...
]
})
then when you use your route:
<router-link to="`/details/${url}`">Details</router-link>
In the above url is the dynamic element you would be passing to it. If it comes from a v-for loop it would be item.url or whatever you are v-for ing.
OR if you name your route you can pass a param like this:
const router = new VueRouter({
routes: [
{ path: '/details/:url', name: 'Details', component: Details, props: true },
// ...
]
})
then use it like this:
<router-link :to="{ name: 'Details', params: { url } }">
Details
</router-link>
You can read more here
I am trying to build a spa using vuejs in which I have a list of users now when I click a user it should route to a new page with user details of the particular user how to params the user id in router-link
You can pass params in router link using
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
Here "name" key parameter defines the name of the route and "params" key defines the parameters you need to send with that route.
If you need to use Route Path instead of Route name, You can use.
<router-link :to="{ path: 'home', params: { userId: 123 }}">Home</router-link>
Reference
Looks like params: {...} doesn't work on non-named routes so to get that working I had to make my links like this:
<router-link :to="'/view-customer/' + customer.ID">
With ES6 template literals:
<router-link :to="`/books/${book.id}`"></router-link>
solution for non-named routes:
<router-link :to="{ path: 'register', query: { plan: 'private' }}"
>Register</router-link>
resulting in /register?plan=private
source: Documentation
I'm using this and it's works fine:
<router-link :to="'/home?id=' + customer.ID">
Also use the following code to retrieve it:
this.$route.query.id
router/index.js:
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Item from '../views/Item.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'List',
component: List
},
{
path: '/item/:id',
name: 'Item',
component: Item
}
}
]
List.vue:
<router-link :to="{ name: 'Item', params: { id: data.item.id }}">{{ data.item.id }}</router-link>
Item.vue:
<template>
id: {{ $route.params.id }}
</template>
<script>
return this.$route.params.id
</script>
Routes declaration
{path: '/insta-view/:name', name: 'instaFrontView', component: instaFrontViewComponent},
Bind parameter using the path
<router-link :to="'insta-view/'+ loginUserName" class="nav-link"> View</router-link>
Bind parameter using the name
<router-link :to="{ name: 'instaFrontView', params: { name: loginUserName }}" class="nav-link"> View</router-link>
export default {
data() {
return {
loginUserName: 'test',
}
},
}
Retrieve parameter in code
this.$route.params.name