I want to use the URL params and Queries into the vue router defining file in order to set the title name dynamically.
I tried to use the $route.params.paramName format:
const routes = [
{
path: '/rooms/:room/:id?',
name: `${$route.params.room}`,
component: RoomsView,
meta:{
title: `${$route.params.room} ${$route.params.id} - WebsiteName`
}
}
]
Do you know how can I access these values?
I think it's best to let the component itself render the logic with something like
computed: {
title() {
const { name, id } = this.$route.params;
return `${name} ${id} - WebsiteName`;
}
}
I think the docs would give you some useful insight as well
Related
I have quite a lot of routes defined and one of the routes is dedicated to user profiles.
Each user has a public profile accessible from HTTP://example.com/#username.
I have tried creating file pages/#[username].js but it doesn't seem to work.
Is there a way to have this behavior without passing # sign with the username because this would greatly complicate index.js handling homepage and I would like to have that code separated.
You can now do this like so in next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/#:username',
destination: '/users/:username'
}
]
}
}
This will make any link to /#username go to the /users/[username] file, even though the address bar will show /#username.
Then, in your /pages/[username].tsx file:
import { useRouter } from 'next/router'
export default function UserPage() {
const { query = {} } = useRouter()
return <div>User name is {query.username || 'missing'}</div>
}
Next.js does not support this yet.
You should watch this issue.
When I navigate to http://localhost:3000/users/123?foo=bar of my nextjs app
I get the following when I print out router.query
{id: "123"}
What could be the reasons it is not adding foo: 'bar' to the query object?
Your file layout should look like this:
pages/
users/
[id].js
Having just tested this, the returned query object is {"foo":"bar","id":"123"}.
I had to add a next.config.js file with the following
module.exports = {
reactStrictMode: true,
async rewrites() {
return [
{
source: '/pages/:slug*',
destination: '/:slug*'
}
]
}
}
I have quite a lot of routes defined and one of the routes is dedicated to user profiles.
Each user has a public profile accessible from HTTP://example.com/#username.
I have tried creating file pages/#[username].js but it doesn't seem to work.
Is there a way to have this behavior without passing # sign with the username because this would greatly complicate index.js handling homepage and I would like to have that code separated.
You can now do this like so in next.config.js
module.exports = {
async rewrites() {
return [
{
source: '/#:username',
destination: '/users/:username'
}
]
}
}
This will make any link to /#username go to the /users/[username] file, even though the address bar will show /#username.
Then, in your /pages/[username].tsx file:
import { useRouter } from 'next/router'
export default function UserPage() {
const { query = {} } = useRouter()
return <div>User name is {query.username || 'missing'}</div>
}
Next.js does not support this yet.
You should watch this issue.
I installed and add this code to my nuxt.config.js and it works perfectly fine. (Link to package)
modules: [
['#nuxtjs/google-tag-manager', { id: 'GTM-XXXXXXX' }],
]
Now I am trying to implement instead of a static ID a function which will return an ID.
I tried to add this lines into my nuxt.config. js but it is not working. Obviously I have to put it somewhere else or so...
This is what I tried
nuxt.config.js
const code = '1234567'
id: () => {
return 'GTM-' + code
}
export default {
...
modules: [
['#nuxtjs/google-tag-manager', { id: id }],
]
...
}
What would be the correct way implementing this?
I would like to do something like that at the end.
modules: [
['#nuxtjs/google-tag-manager', {
id: ({ req }) => {
if (req.headers.referer == "exmple.com")
return 'GTM-156'
if (req.headers.referer == "exmple.it")
return 'GTM-24424'
if (req.headers.referer == "exmple.es")
return 'GTM-2424'
}
}]]
EDIT:
I solved my problem by rewriting the whole module. It is not possible to use this Module because it is loaded only on build time. I rewrote the module and moved the code into nuxtServerInit.
nuxtServerInit is called on each request (modules only onetime). In the request I asked from which domain the request is coming. Depending on the domain I add different google-tag-manager id's to the head and the plugin.
From package docs:
modules: [
['#nuxtjs/google-tag-manager', {
id: () => {
return axios.get('http://example.com/')
.then(({ data }) => {
return data.gtm_id
})
}
}]]
You can use process.env.NODE_ENV inside function which will return an ID
Edit 1
To put the gtm id, depending on req.headers.referer you need to provide context to the function returning the id. This can be done in middleware
See how it works here
https://github.com/nuxt-community/modules/blob/master/packages/google-tag-manager/plugin.js
Edit 2
As far as I understand your question, it will not work to have a query context in the config.
Look at i18n middleware: request.locale - > store - > update modules (router, vuetify, moment, etc.)
https://nuxtjs.org/examples/i18n/
~/middleware/gtm.js
export default function ({ app, store }) {
// app.$gtm contains id, you can set another from store
}
don't forget to add middleware to the page
page.vue
export default {
middleware: ['gtm']
}
I am trying to use angular2-in-memory-web-api in my angular 2 project. I'm having trouble finding any documentation that shows how to return different data objects for different requests with the same collection name. I believe the class I use for my SEED_DATA is off but I'm not sure how to structure it the right way to get what I want.
Here is my main.ts
import {provide} from "#angular/core";
import {bootstrap} from "#angular/platform-browser-dynamic";
import {HTTP_PROVIDERS, XHRBackend} from "#angular/http";
import {AppComponent} from "./app.component";
import {SEED_DATA, InMemoryBackendService} from "angular2-in-memory-web-api/in-memory-backend.service";
import {AppTestData} from "./AppTestData";
bootstrap(AppComponent, [
HTTP_PROVIDERS,
provide(XHRBackend, {useClass: InMemoryBackendService}),
provide(SEED_DATA, {useClass: AppTestData})
]);
My AppTestData.ts file would look something like this
export class AppTestData {
createDb() {
let studentData = {
name: "Student Name",
grade: "B"
};
let otherStudentData = {
name: "Other Student Name",
grade: "A"
};
let httpPaths = {
somepath: {
student: studentData,
anotherPath: {
student: otherStudentData
}
}
}
return httpPaths;
}
}
My attempt at the httpPaths object is off. But the idea would be me calling a get http call to "something/student" and getting back studentData and calling another get http call to "something/anotherPath/student" and getting back otherStudentData.
The following does seem to work but I would like to specify my complete path incase I want post to “something/student” and “something/anotherPath/student” and get different results.
let httpPaths = {
student: studentData
}
I believe you missed the brackets in the return statement:
return {httpPaths};
The developer created an example which can be found here
If you want to "mock" two different databases you have to follow this syntax:
export class AppTestData {
createDb() {
let heroes = {
name: "Batman",
city: "Gotham"
};
let countries = {
name: "America",
code: "GR"
};
return {heroes,countries};
}
}
In your service you can consume it with a Promise and the url for the http request would be :
private httpUrl = '../contacts/contacts';
My file structure is something like:
repo
-app
-shared
myservice.ts // this consumes the data from the InMemory DB
data.service.db.ts // this implements the InMemoryDbService
...
At least that's how I solved the problem.
Indeed the official documentation is poor so far.