Question

我申请的路线是

const router = new VueRouter({
mode:'history',
routes:[
    {
        path:'/home',
        name:'home',
        component: Home
    },
    {
        path: '/services',
        name: 'services',
        component: Services
    },
    {
        path:'/blogs',
        name:'blogs',
        component:Blogs
    },
    {
        path:'/pingme',
        name:'pingme',
        component:Pingme
    }
],

}）

现在，在服务路径中，我想导航到Home组件中的内容。如何在单击服务链接时创建路由器以导航到服务div？

Answer 1

我们假设你想把重点放在Service组件中的特定div上。

我们将利用查询参数来实现这一目标。您还可以添加一个专用网址来执行此操作。

这是我的路线：

{
    path: '/services',
    name: 'services',
    component: Services
}

然后在url localhost:8000/services?show=mydiv和组件的挂钩中执行以下操作：

mounted() {
  // add a id to the div we want to bring in foucs
  // and id and the id is paased the query params
  document.getElementById(this.$route.query.show).scrollIntoView()
}

让我知道它是否适合您。

修改

我们可以通过使用观察者和计算属性来实现这项工作的另一种方式。

首先在路径中为show query param添加一个计算属性。

computed: {
  show() { return this.$router.query.show }
}

然后添加观察者以触发焦点。

watch: {
  show: {
    immediate: true,
    handler(value) { 
      document.getElementById(value).scrollIntoView();
    }
}

这应该适用于所有情况。

如何路由到vuejs 2中组件中的特定div

1 个答案: