I want to have a route like this.
http://localhost:8080/help/category/newuser#1
Therefore, I write this in my template
<router-link
v-bind:to="{
name: 'help',
params: { id: selectedCategory+'#'+eachQuestion.id },
}"
>
But this doesn't work and resulting in
http://localhost:8080/help/category/newuser%231
So the # turns into %23. How to solve this? Thanks!
You can navigate to a route with params by passing the param names as an object:
params: { category: selectedCategory }
If you are also passing a hash value, you're able to declare the hash property as well:
hash: eachQuestion.id
Related
Im a novice in NuxtJS. My page is structured with a navbar/menu, blog page with all articles listed and a couple of mostly static pages.(like most company websites)
I am retrieving my data from a Strapi API, where I can only fetch single entries by their ID.
What I have to do:
When the user clicks on the navbar link, I need to pass the ID of the corresponding article/post to the article component in order to retrieve the article from the API. So far it is working quite well, but doing it via router params, an article will have an URL like https://www.example.com/posts/63ndjk736rmndhjsnk736r
What I would like to do:
I would like to have an URL with a slug https://www.example.com/posts/my-first-Post and still pass the ID to the article component/page.
Whats the best way to do that?
You can use query. Here is some example:
I have some data:
data = [{id: "63ndjk736rmndhjsnk736r", name: "my-first-post"}, {id: "88ndjk736rmndhjsnk736r", name: "my-second-post"}]
In my navbar list:
<template v-for="(item, index) in data" key="index">
<router-link :to="{ path: '/posts/' + item.name, query: { id: 'item.id' }}"
>{{item.name}}</router-link>
</template>
How your routes show:
http://example.com/posts/my-first-post?id=63ndjk736rmndhjsnk736r
What you need:
Create dynamic Route -> https://nuxtjs.org/guide/routing/#dynamic-routes
Pass query named id which is your single entry ID
Get query (id) and fetch your single entry using query id:
const postId = this.$route.query.id
You can use like _slug.vue in pages folder.
and your routes like this;
{
name: 'posts-slug',
path: '/posts/:slug?',
component: 'pages/posts/_slug.vue'
}
then create a new vue file.
export default {
validate ({ params }) {
return /^\d+$/.test(params.id)
}
}
this way you can also access the parameter
How can I concatenate named route to router-link tag? My code:
<router-link
:to="'//https://t.me/share/url?url='+{name: Profile, params: {id: user.user_id}}+'&text=Hi I am ' + user.first_name + ' ' + user.last_name + ':'">Click Here</router-link>
The problem is this part:
{name: Profile, params: {id: user.user_id}}
it returns [Object object]. How can I fix it to return correct value of this object which is http://example.com/profile/1 as an example?
There is no need to use router-link for external links, since it's click should not be processed with vue-router.
I'd suggest to create a computed property (or method) that will return a full url with all data included. Which also will remove certain logic from a template, as a good practice.
Template link will look as follow:
<a :href="telegramLink">Open Telegram</a>
And computed property to generate the link:
computed: {
telegramLink () {
const user = this.user
// Get route information by provided parameters
const route = this.$router.resolve({
name: 'Profile',
params: {
id: user.user_id
}
})
// Create full address url
const url = `${window.location.origin}${route.href}`
const text = `Hi I am ${user.first_name} ${user.last_name}:`
return `https://t.me/share/url?url=${url}&text=${text}`
}
}
I've been trying to pass a prop in a component's template.
I think I'm missing some points here, and I didn't start to include my components in single files yet.
app.js
Vue.component('chat-response', {
props: ['response', 'senderClass'],
template: '<div>From {{ senderClass }} : {{ response.text }}</div>'
})
var app = new Vue({
el: '#app_chat',
data: {
responseList: [
{ id: 0, text: 'Response 1', type: 'Owner' },
{ id: 1, text: 'Response 2', type: 'Other' },
{ id: 2, text: 'Response 3', type: 'None' }
]
}
})
page.html
...
<chat-response v-for="response in responseList"
v-bind:key="response.id"
v-bind:response="response"
v-bind:senderClass="response.type"></chat-response>
...
Output :
From : Response 1
From : Response 2
From : Response 3
As we see, senderClass won't show up. I've tried different methods and only got errors that I could understand after reading around.
I don't wish to use response.type instead of senderClass because in the meantime, I'm setting senderClass after mounted with a real css class.
Maybe it's my approach that's completely wrong, could you give me some hints ?
I think the name of your property is wrong. Just change in page.html v-bind:senderClass="response.type" to v-bind:sender-class="response.type"
http://jsfiddle.net/eywraw8t/310360/
HTML attribute names are case-insensitive. Any uppercase character will be interpreted as lowercase. So camelCased prop names need to use their kebab-cased equivalents.
Apart from what Jns said You could get rid of v-bind altogether and just use :varibaleName for bindings.
Link to fiddle
https://jsfiddle.net/50wL7mdz/654614/#&togetherjs=J9vgbNaR7m
This seems like a really simple issue, but it's driving me crazy...
Does anyone know how I can specify a dynamic :id parameter in the href routing configuration option?
The following unfortunately doesn't work:
config.map([
// ... default parameterless routing here
{
route:[':id/request'],
moduleId:'processes/bdd/request/request',
name:'Request', title:'Request', href:`#/bdd/request/${id}/request`, settings:{type:'Request', icon:''}, nav:true,
},
{
route:[':id/requestAuth'],
moduleId:'processes/bdd/request/requestauthorization',
name:'RequestAuthorization', title:'Request Authorization', href:`#/bdd/request/${id}/requestAuth`, settings:{type:'Request', icon:''}, nav:true,
},
// ... some additional mappings here
]);
The href property is static. If you want to generate a route for a link using this route, you could use the route-href custom attribute like this:
route-href="route: request; params.bind: { id: someProp }"
Note that I changed the route name to be camelCase (all lowercase since it is one word here) to match the route naming convention.
I had a similar use case and I was able to get this to work by adding a pipeline step to the router that alters the config on the fly.
My use case may be a little different in that I only want the item to appear in the nav bar when the route is active -- say I have routes /abc, /def/:id, and /ghi -- when the active route is ABC or GHI, only those items will appear in the nav bar, but when the active route is DEF, it should appear in the nav bar, and clicking it should lead to the same DEF ID you're currently looking at. So my route configuration includes a setting that indicates the route should only appear in the nav bar when it's the active route.
Here are the interesting parts of my actual configureRouter function:
configureRouter(config, router) {
config.addPreActivateStep(Preactivate); // explained below
config.map([
// some routes
{ route: 'patients/:patientId', name: 'patient-master',
moduleId: 'patients-and-cases/patient-master/patient-master',
title: 'Patient', nav: true, settings: { renderOnlyWhenActive: true },
href: '#' // it doesn't matter what this is
},
// more routes
]);
}
And here is the Preactivate class that sets the href on preactivate:
class Preactivate {
run(routingContext, next) {
routingContext.config.href = routingContext.fragment;
return next();
}
}
If, unlike me, you want this to display in a nav bar all the time, this will still work -- the href will simply remain set to the last thing it was set to when the route was active. In that case you'd probably want to initialize it to some default value that makes sense.
I am trying to add a route deppending on a boolean, so if the condtion is meet the route will show and be in the navbar and if not it will not be added.
I have trided to change nav: option depending on a condtion, but I have missed something...
{
route: 'aRoute',
moduleId: 'modules/something/mySite,
nav: cond ? true : false,
title: 'mySite',
isStatic: false
}
Probably I am stupid but I need help on this.. :/
I'm not 100% sure, but routes are probably built one time and reused, at least those that are part of navigation model (nav === true). That would mean that you cannot use dynamic expression for nav as it would be processed only once.
If you only need this for the purpose of displaying the route in navbar, then you can create a workaround using settings property to mark the route somehow and do condition check when creating navbar.
{
route: 'aRoute',
moduleId: 'modules/something/mySite,
nav: true,
title: 'mySite',
settings: { occasionallyVisible: true } // add your own properties here...
}
I used settings.occasionallyVisible property, but you can add whatever you like.
<li repeat.for="route of router.navigation"
if.bind="!route.settings || !route.settings.occasionallyVisible || cond">
<a href.bind="route.href">${route.title}</a>
</li>
Navigation route will be displayed if it doesn't have settings property OR settings.occasionallyVisible is falsy OR cond is true. Of course, cond would be that condition you need.
Not as elegant, but it should get the work done until you get the better answer :)
The following post should help you do what you want:
http://odetocode.com/blogs/scott/archive/2016/05/31/dynamically-add-routes-in-aurelia.aspx
It shows how to add a route dynamically by doing this:
this.router.addRoute(
{ route: "secret", name: 'secret', moduleId: "app/secret",
title:"Secret", nav:true
}
);
then refreshing the router with this method call (which you are apparently missing):
this.router.refreshNavigation();