I have a click event like so:
cancelEdit(){
this.$router.push({path: '/path/abc'})
}
The user is sent to a new "page" after click. However, is it possible to also load a specific component when he arrives to the new path? I thought I'd do something like:
import ComponentHere from '#/components/ComponentHere.vue'
export default {
..snip..
methods: {
cancelEdit() {
this.$router.push({ path: '/admin/feedback-maintenance', component: ComponentHere })
}
This did not work in my attempt.
Related
In my vue SPA I have a simple router like this:
{path: '/page/:userId', name: 'user', component: user},
Which means an url like http://xxx.xxx/user/1 shows the component user having the content about user 1.
In case on the same page I have some link as
<vue-link :to="{name:'user', params={userId:3}}">
The router update only the URL but the content page (because it assumes the page is the same where I'm at)
My user content loads data using the url params in data and in watch too
data
userId: this.$route.params.userId || 1,
watch
watch: {
userId: function () {
return this.$route.params.userId || 1;
},
How to fix it without using router-view?
Thanks for any suggestion
If I correctly get your problem which is that you are not able to track your route change. You need to watch the route change, whenever your route changed on a same component it should do something.
watch: {
$route() {
this.updatePage(this.$route.params.userId)
}
},
methods: {
updatePage(param) {
// call api / do something
}
}
I have page '/users'.
export default {
name: 'Users',
created () {
const queryParams = this.$route.query
this[GET_USERS_FROM_SERVER](queryParams)
},
methods: {
...mapActions([GET_USERS_FROM_SERVER]),
onBtnFilterClick () {
this.$route.push('/users?minAge=20&name=alex&withPhoto=true')
}
}
}
When page started, it checks params and gets users from server. But it doesnt work and i think it is because router think that '/users' and '/users?params' is the same path.
If I add this.$router.go() after this.$router.go() it will reload current page and it works. But I want to do it in another way. How can I do this?
Don't reload the page if you do not have to.
this.$route.query can be just as reactive as your other data, so use this fact.
export default {
name: 'Users',
watch: {
'$route.query': {
immediate: true,
deep: true,
handler (queryParams) {
this[GET_USERS_FROM_SERVER](queryParams)
}
}
},
methods: {
...mapActions([GET_USERS_FROM_SERVER]),
onBtnFilterClick () {
this.$route.push('/users?minAge=20&name=alex&withPhoto=true')
}
}
}
When you watch for changes on $route.query, you call this[GET_USERS_FROM_SERVER] whenever it changes. I suspect that this changes the data in your component. I've set the immediate flag to run it when the component is created. I've set the deep flag, because this is an object, and I am not entirely sure if the query object gets replaced with every route change, or just modified. The deep flag will make sure that it will always trigger the handler.
I have navmenu that needs to reloaded after a user logs out.
I have a logout.ts that essentially clears the JWT and loggedIn value.
import { autoinject } from "aurelia-framework";
import { TokenService } from "../../auth/tokenService"; z
import { Router } from 'aurelia-router';
#autoinject
export class Logout {
constructor(private tokenService: TokenService, public router: Router) {
tokenService.clearJWT();
this.router.refreshNavigation()
}
}
Thats all fine but I wanted to redirect to the home page but at the same time update the menu this time rechecking for loggedIn status.
I tried redirect, I have tried:
this.router.navigateToRoute('home')
and the one above. In all cases the navmenu does not update. By updating the navmenu it will check for a loggedin value in localstorage and change the structure of the menu.
I also wanted it to go the home page after removing those items but more importantly how do I get it to refresh the navmenu?
It sounds like you need to make sure your home route is refreshed even though it is already the current route. If so, in your configureRouter method, add activationStrategy.replace:
import {activationStrategy} from 'aurelia-router';
export class MyClass {
configureRouter(config) {
config.map([{
route: 'home',
name: 'home',
activationStrategy: activationStrategy.replace,
title: 'My Title',
moduleId: 'myModule',
}]);
}
}
In VueJS im trying to setup a scenario where the component used is determined by the url path without having to statically map it.
e.g.
router.beforeEach(({ to, next }) => {
FetchService.fetch(api_base+to.path)
.then((response) => {
router.app.$root.page = response
// I'd like to specify a path and component on the fly
// instead of having to map it
router.go({path: to.path, component: response.pageComponent})
})
.catch((err) => {
router.go({name: '404'})
})
})
Basically, I'd like to be able to create a route on the fly instead of statically specifying the path and component in the router.map
Hope that make sense. Any help would be appreciated.
I think that what you're trying to archive is programmatically load some component based on the current route.
I'm not sure if this is the recommended solution, but is what comes to my mind.
Create a DynamicLoader component whit a component as template
<template>
<component :is="CurrentComponent" />
</template>
Create a watch on $route to load new component in each route change
<script>
export default {
data() {
return {
CurrentComponent: undefined
}
},
watch: {
'$route' (to, from) {
let componentName = to.params.ComponentName;
this.CurrentComponent = require(`components/${componentName}`);
}
},
beforeMount() {
let componentName = this.$route.params.ComponentName;
this.CurrentComponent = require(`components/${componentName}`);
}
}
</script>
Register just this route on your router
{ path: '/:ComponentName', component: DynamicLoader }
In this example I'm assuming that all my componennt will be in components/ folder, in your example seems like you're calling an external service to get the real component location, that should work as well.
Let me know if this help you
As par the documentation of router.go, you either need path you want to redirect to or name of the route you want to redirect to. You don't the component.
Argument of router.go is either path in the form of:
{ path: '...' }
or name of route:
{
name: '...',
// params and query are optional
params: { ... },
query: { ... }
}
so you dont need to return component from your API, you can just return path or name of route, and use it to redirect to relevant page.
You can find more details here to create named routes using vue-router.
I use Stamplay as BaaS, so to authenticate user, I just redirect to
/auth/v1/auth0/connect
After, user authenticate.. the Stamplay call my app with
/login/callback?jwt=abc.123.xyz
How can I authenticate user after Stamplay call my app?
Tried
I my router config I try..
'/login/callback': {
component: Vue.extend({
ready() {
// ... THIS IS NOT CALLED!! NEVER
console.log('... ready .. ')
console.log(this.$route.query.jwt)
}
})
}
Try to access this.$route.query.jwt from within the component.
Hi I think you will have a view component for /login/callback in your router config. what you need is when this component is activated, trigger some function right?
So in above view component, where you have data, methods, you can try to do this:
//your component
'/login/callback': {
component: Vue.extend({
data(){
return {
}
},
methods: {},
route: {
activate(){
console.log('... ready .. ')
}
}
}