I want to change the meta attribute inside my .vue file. The problem is, I am only sending the id property but I want the name to be the meta.name. I tried the solution from phil (here) but it didn't worked out.
So far I got a simple router and a vue file:
router.js
{
path: ":id",
name: "singleBook",
component: BookList,
meta: { name: "Book" },
},
<template>
<p> {{ $route.meta.name }} </p>
</template>
//...
<script>
const route = useRoute();
const props = defineProps({
data: Object,
});
</script>
Now I tried to access the meta field with route.meta.name and overwrite the current value 'Book' with the props.data.name value. Unfortunately I don't know how to do this.
You might want to consider vue-meta plugin. Also try check on your guard/lifecycle WHEN you exactly change your meta. I think you should consider changing it before any dom-loads. Not sure if this works but it feels like it's worth considering.
Related
Hi beautiful Vuejs developers out there!
I have a little problem with routing many Vue components/pages dynamically. In this scenario I am using nested routes to have a couple of routes for my layout components and hundreds of child routes for my pages and as you can imagine I'll have to type many child routes statically or manually, and then add more when I need more child routes in the future code changes but I need a solution to simplify/solve this problem with more efficient/better way like adding those routes from what user types after the layout in the url... here is my example code code:
const routes: RouteRecordRaw[] = [
{
{
path: '/student',
component: () => import('layouts/StudentLayout.vue'),
children: [
{
path: 'dashboard',
component: () => import('pages/student/Dashboard.vue'),
},
{
path: 'profile',
component: () => import('pages/student/Profile.vue'),
},
],
},
}
As you see in this code I have a layout named Student and it has two children but I'll have to type manually hundreds of child routes for this layout and other layouts is there any way to dynamically set up those routes with what users enter after the layout name like /student/dashboard or /layout/page and match it with a component name? I mean like params in Angular, can I use the param value itself inside the router to say?
{
path: ':pagename',
component: (pagename) => import('pages/student/' + pagename + '.vue'),
},
let me know if there is an efficient way to solve this problem.
Thanks in advance!
I would, personally, not use this, or advise such an approach, nor have I done it, but this idea came to me when I read your question:
My best guess would be to have a handler component which renders a component dynamically based on a route parameter (say you have /:subpage as a child to /student and the handler component is set to that route), and an exception handler around that to show a 404 page when the user types in an inexistent/unsupported route.
For example, I would dynamically import the component by the route parameter into a predefined let (e.g. let SubpageComponent; outside the try catch block), have a try catch block around the dynamic import assignment for the respective error where catch would set the variable to a 404 page. Then I would add the SubpageComponent into the data() of the component doing the rendering of the route.
Edit
I've written out come code that, maybe, makes sense.
It's based on https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components
your routes definition, changed
const routes: RouteRecordRaw[] = [
{
path: '/student',
component: () => import('layouts/StudentLayout.vue'),
children: [
{
path: '/:subpage',
component: () => import('pages/student/SubpageRenderer.vue'),
props: true,
},
],
},
]
SubpageRenderer.vue
<script>
export default {
props: ['subpage'],
data() {
return {
currentSubpage: () => import(`./${subpage}.vue`)
}
}
}
</script>
<template>
<component :is="currentSubpage"></component>
</template>
Instead of using the currentSubpage import, you can also use the subpage route prop to bind :is if subpage is the name of a registered component.
Since this would get only "dashboard" from the route, you'd need some namespacing, like "student-dashboard" with the help of template literals. You could make currentSubpage into a template literal that creates the student-${subpage} name.
I'd probably recommend importing the options object of the component designated by the subpage route parameter instead of registering all the components - if you're registering them, you might as well use vue-router the usual way :)
Also, I only think this could work! It should be tested out, and perhaps casing should be kept in mind, and maybe the Layout suffix as well (subpage will probably be all lowercase, and you'll probably have the components named in PascalCase). After uppercasing the first letter, this could also obviously lead to both /student/Dashboard and /student/dashboard being valid routes
I am using client side routing and have the route name be the object's name. I am linking to the Edit.vue component but if I want to render the age in that Edit component, how do I get that passed in? I know I have name accessible in the router params but I want the other fields in that object too, such as age.
App.vue
<div v-for="item in items">
<router-link :to="`/edit/${item.name}`"> Edit ${item.name} </router-link>
</div>
data() {
return {
items: [ {name: "Carl", age: 23}, { name: "James", age: 43}]
}
}
then in my router config, I have:
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/edit/:name",
name: "Edit",
component: () =>
import(/* webpackChunkName: "edit" */ "../views/Edit.vue"),
},
];
State management is the keyword, which might help for your further research.
Especially vuex, as the most popular Vue state management library probably makes sense in your case (https://www.npmjs.com/package/vuex). There are tons of tutorials out there.
If you don't want to use a state management library, you can implement a simple version of it on your own by saving the data in the localstorage or in the cookies. Or - if it's just about the age, you also could add it to the query params.
There is also a pretty well described SO answer for a similar question: Vue: shared data between different pages
This is not the best way to do it.
You could implement /edit/:name/:age. But what happens if you access the URL /edit/Carl/999?
You should fetch the data, such as name and age, by a unique user id instead: edit/:userid.
I have setup a route in vue-router 4 that should load a component dynamically depending on whether the user is logged in or not. I did it like this (there may be a better way?):
import Personal from '../views/Personal.vue';
import Public from '../views/Public.vue';
routes: [
{
path: '/',
component: async () => {
const isLoggedIn = await authenticateUser();
if (isLoggedIn == true) {
return Personal
} else {
return Public
}
}
}
]
The App.vue file is this:
<template>
<div id="app">
<Site-Header></Site-Header>
<router-view></router-view>
<Site-Footer></Site-Footer>
</div>
</template>
The problem is that if a user logs in from the homepage route with path of '/', he doesn't navigate away from this route. Instead I would like vue-router to just load the Personal component instead.
The switch between Personal and Public only seems to work if I hard refresh the page, otherwise no changes happen. So if a user logs in, they still see the Public.vue component, then after a page refresh they see the Personal.vue component. If they then logout, they still see the Personal.vue component until they refresh the page.
How could I force vue-router to analyse the route after log-in/log-out and load the correct component?
To have multiple routes utilizing the same path, your best bet is using Named Views. You can define the default component for your index, or / path to be your Public component, while conditionally selecting a different component using v-if in your template.
You could define your routes as:
routes: [
{
components: {
default: Public,
Personal: Personal
},
name: "index",
path: "/"
}
]
Important to note that the syntax here differs. The component field here has to be pluralized in order for this to work, so it has to be components.
Then in your root template that's calling the views, you can then use a simple v-if to switch between them, depending on whether the user is logged in or not. How you store that information is up to you, so just adapt the below code to reflect your own app's logic
<!-- The default is Public, so you don't have to provide the name here -->
<router-view v-if="!user.loggedIn" />
<router-view v-else name="Personal" />
You can see this in this codesandbox
I'm new to Vue now working with its router.
I want to navigate to another page and I use the following code:
this.$router.push({path: '/newLocation', params: { foo: "bar"}});
Then I expect it to be on the new Component
this.$route.params
This doesn't work.
I also tried:
this.$router.push({path: '/newLocation'});
this.$router.push({params: { foo: "bar"}});
I've inspected the source code a bit and noticed this property gets overwritten with a new object {}.
I'm wondering is the params use is other than I think?
If not, how to use it?
Since you want to pass params to the component of the respective route you route object's path property should have a dynamic segment denoted by : followed by the name of the key in your params object
so your routes should be
routes: [
{path: '/newLocation/:foo', name: 'newLocation', component: newComponent}
]
Then for programmatically navigating to the component you should do:
this.$router.push({name: 'newLocation', params: { foo: "bar"}});
See that I am using name of the route instead of path as you are passing params by the property params.
if you want to use path then it should be:
this.$router.push({path: '/newLocation/bar'});
by the path approach the params will automatically map to corresponding fields on $route.params.
Now if you console.log(this.$route.params) in your new component you will get the object : {"foo": "bar"}
Try using query instead of params
this.$router.push({path: '/newpath', query : { foo: "bar"}});
And in your component
console.log(this.$route.query.foo)
The easiest way I've found is to use named routes along with the params options. Let's say you have a router file that looks like this:
And you want to reach the "movie" page with some ID. You can use Vue's router link component (or Nuxt's link component) to reach it like this:
Vue:
<router-link :to="{ name: 'movie', params: { id: item.id } }">{{ item.title }}</router-link>
Nuxt:
<nuxt-link :to="{ name: 'movie-id', params: { id: item.id } }">{{ item.title }}</nuxt-link>
Note that the name parameter must match the "name" attribute of the desired route in the router file. And likewise, the parameter name must match.
Nuxt creates the route file for you automatically when you create a
new page. To see what name Nuxt gives its routes, go to the .Nuxt
folder in your project and look for a "router.js" file
Isn't it generally considered an anti pattern to bind the properties to the router?
It's a much more DRY solution to have them bind to the component it's self, which I actually believe the Vue router does. Please see: https://router.vuejs.org/en/essentials/passing-props.html for more info on the best practices here
Can you try accepting the property in the props: [] property of your component? You can see how to do that here: https://v2.vuejs.org/v2/guide/components.html#Props
Please do pop up if you have any questions! Happy to help further.
I'm try to pass data between Vuejs views with vue-router.
//View1.vue
route: {
data: function (transition) {
transition.next({
message: "this is it!!"
});
}
}
I call next wiew with a click action button with:
//View1.vue
methods:{
showResult: function(){
this.$router.go('/View2');
}
}
but the data are not filled in the next view:
//View2.vue
<template>
<p>Message: {{ message }}</p>
</template>
Does somebody knows what's wrong with my usage of vue-router? I don't think I need to pass through services for this, right?
Working examples on jsfiddle (or jsbin, etc) are welcome :D
If View2 is a child component you can pass it using props:
//View1.vue
<view2-component :passedData='message'></view2-component>
Alternatively, I believe if you set data on the $route object from View1, since that object is shared between all vue instances, I believe it will be available application-wide.
//View1.vue
this.$router.myProps.message = message
But arguably the better way to share data is use a POJO - plain old javascript object and bind it to both views. To do this you typically need a shared state object and you can if you wish use Vuex for this although it is a little more complicated than a POJO.
I know this has already been answered, but if someone is here looking for a way to pass data to a route from a router, I use Meta Data.
Not sure if this is what the questioner meant or not but I think it is?
I personally prefer this to props just because I am more used to using it.
It allows for data to be easily passed and received without having to modify children.
Anyway here is a snippit and link!
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Homepage',
meta: {
logo:{
"/imgs/Normal-Logo.png"
}
}
},
{
path: '/admin',
name: 'Admin',
meta: {
logo:{
"/imgs/Admin-Logo.png"
}
}
},
]
})
In any children who want to use vars:
<logo :src="this.$route.meta.logo"/>
Ref:
https://router.vuejs.org/guide/advanced/meta.html