强制 vue 3 路由器两次到达同一条路线 - 将其识别为新事件

Question

我用的是vue 3

我有一个在其中加载组件的视图。每次单击文本时，都会调用 router.push 并加载一个组件，其中包含一些参数

click here
<h3 @click="handleClick('intro', 'abc')" >intro</h3>  
to load component here
<router-view></router-view>

点击是这样处理的

  setup(){
     
    const router = useRouter();

    const handleClick = (part, term)=>{ 
      router.push({name:part, params: {term}}).catch(err => {}); 
    } 

    return{handleClick}
    
  }

so router.push 加载 <router-view> 另一个较小的组件（名为 intro），根据应用程序的路由器，设置如下

path: '/book',
name: 'book',
component: book,
children:[
  {
    path: 'intro/:term',
    name: 'intro',
    component: Intro
  }, 
]

组件加载到视图中，url 就像 /book/intro/abc

在 intro 组件中，为了处理路线的变化并向下滚动 abc id，我这样做

const route = useRoute();
let id = false; 
let mounted = ref(false);

//grab the term from route, to set it as id and if component is mounted, scroll to id
watchEffect(()=>{
  id = route.params.term; 
  let el = document.getElementById(id);
  if (mounted && el) {
    el.scrollIntoView({behavior: "smooth"});
    id = false;
  }
}) 

//check if mounted and if also id that came from route exists, scroll to id
onMounted(() => {
  mounted = true;
  let el = document.getElementById(id);
  if (id && el) { 
    el.scrollIntoView({behavior: "smooth"});
    id = false;
  }
})

问题这有效并且基于路由，加载组件并设置它将滚动到的 id。

但是如果我滚动到一个id，然后在页面中随机滚动，然后点击同一个id滚动，它不会再次滚动到那个id，因为id不会改变，所以路由不会触发另一个事件。

示例：url 是 /book/intro/abc。如果我随机滚动然后点击 abc ， url 是一样的，没有事件被触发，它不会再次滚动回 abc。

我该如何解决这个问题？我想避免在我的 url 中使用主题标签、查询或问号。理想情况下，我想要像 /book/part/term 这样的“干净”url，并且我想在视图中加载由 url 指示的部分，而不是将所有部分都加载到视图中，作为超长文字 .

编辑我也想避免重新加载

谢谢

Answer 1

您可以观察整个路由对象并使用 force 选项强制更改路由器。

/* In the template */
<router-link :to="{ path: 'some-path', force: true }">link</router-link>

// In the script
const route = useRoute()
watch(() => route, () => {
  console.log('route changed')
}, {
  deep: true
})

注意：我在Vue路由器源码上找到了force选项。但我找不到任何关于它的文件。也许这只是一个未来的功能。使用风险自负。

强制 vue 3 路由器两次到达同一条路线 - 将其识别为新事件

Force vue 3 router to got to the same route twice - recognize it as a new event

vue.js

url

vue-router

vuejs3

router