Как направить к конкретному div в компоненте в vuejs 2 - PullRequest
Новая
       18

Как направить к конкретному div в компоненте в vuejs 2

0 голосов
/ 06 июня 2018

Мои маршруты для приложения: 

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.Как создать маршрутизатор, чтобы переходить к разделу служб при нажатии на ссылку служб?

1 Ответ

0 голосов
/ 06 июня 2018

Допустим, вы хотите сфокусировать внимание на конкретном div в компоненте Service.

Мы будем использовать параметры запроса для достижения этой цели.Вы также добавляете выделенный URL, который будет делать это.

Это мой маршрут: 

{
    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()
}

Дайте мне знать, если это работает для вас.

Редактировать

Еще один способ сделать эту работу - использовать наблюдателя и вычисляемое свойство.

Сначала добавьте вычисляемое свойство для шоузапросить параметр в маршруте. 

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

Затем добавьте наблюдатель, чтобы активировать фокус. 

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

Это должно работать во всех случаях.

...