vue.js - Vue navigating the same route with different params, elements point to first route loaded for different routes - Stack

admin管理员组

文章数量:1310532

When I navigate to a route with params I can reference the elements in the page for example refresh them or add new div, but if I route to another page and then to the same route with different params then I can not reference any element on the page or they point to the first time I loaded page with params. Is there a way around it, I tried forceupdate the component and wrapping it in keepalive.

router/index.ts

import { createRouter, createWebHistory } from '@ionic/vue- 
router';
import { RouteRecordRaw } from 'vue-router';
import SomePage from '@/views/SomePage.vue';

const routes: Array<RouteRecordRaw> = [
{
    path: '/some/:id',
    name: 'SomePage',
    component: SomePage
}
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

And in my App I watch for route changes and awnt to refresh/manipulate dom elements

 watch:{
    $route (to, from){
      if(to.name == 'SomePage') {
         this.emitter.emit("addDatePickerToSomePage", {});
      }
    }
 }

But after first page open with params in the following page loads with different params I can not manipulate dom the elements on page all point to the first time I loaded page with params and only that one works when I go back to it

When I navigate to a route with params I can reference the elements in the page for example refresh them or add new div, but if I route to another page and then to the same route with different params then I can not reference any element on the page or they point to the first time I loaded page with params. Is there a way around it, I tried forceupdate the component and wrapping it in keepalive.

router/index.ts

import { createRouter, createWebHistory } from '@ionic/vue- 
router';
import { RouteRecordRaw } from 'vue-router';
import SomePage from '@/views/SomePage.vue';

const routes: Array<RouteRecordRaw> = [
{
    path: '/some/:id',
    name: 'SomePage',
    component: SomePage
}
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

And in my App I watch for route changes and awnt to refresh/manipulate dom elements

 watch:{
    $route (to, from){
      if(to.name == 'SomePage') {
         this.emitter.emit("addDatePickerToSomePage", {});
      }
    }
 }

But after first page open with params in the following page loads with different params I can not manipulate dom the elements on page all point to the first time I loaded page with params and only that one works when I go back to it

• vue.js
• ionic-framework

Share Improve this question Follow edited Feb 3 at 19:40 cesur swrod asked Feb 3 at 18:54 cesur swrodcesur swrod 1133 bronze badges 5

• It's unclear which situation you describe. Please, provide stackoverflow/help/mcve for your problem. There are no dynamic routes in your code. Do you mean /some/:id'? It's a route with a param, not dynamic. There's a common problem associated with navigating the same route with different params, this needs to be additionally handled, it's unknown if this is so in your case – Estus Flask Commented Feb 3 at 19:01
• And yes its my case same route with different params. and elements point to first one I loaded – cesur swrod Commented Feb 3 at 19:03
• The question is still not specific enough, you didn't show code. It's unknown if you use ionic or vue router. Any way, the approach is similar. Route component is not remounted on id change, you need to watch route params object in a watcher, it's supposed to be reactive ionicframework/docs/vue/navigation#url-parameters – Estus Flask Commented Feb 3 at 19:27
• Sorry I will add my code now, fyi I watch route changes so I know when page is opened and do what I want but I want to be able to reference elements in dom but unfortunatelly they all point to the first time I opened the page with params and only that one works, all newer page loads with params dom elements point to the first one. – cesur swrod Commented Feb 3 at 19:32
• Ok so I was looking it up and when I use ref instead of like getelementbyid it did work. Thanks Estus your comments helped – cesur swrod Commented Feb 3 at 20:03

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Ok so I was looking it up and when I use ref instead of like getelementbyid it did work.

本文标签：