Navigating to a specific div within a component in Vuejs 2: Steps for routing

Question

Navigating to a specific div within a component in Vuejs 2: Steps for routing

These are the routes I've set up for my application:

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
    }
],

It's now my goal to navigate to a specific div within the services route when the link is clicked. Specifically, I want to navigate to the services div within the Home component. How can I adjust my router settings to achieve this?

javascript laravel-5 vue.js vuejs2 vue-router

Answer 1

Answer №1

If you want to emphasize a specific div within the Service component, you can utilize query parameters for this purpose. Additionally, you can create a dedicated URL that accomplishes the same goal.

Here is an example of a route:

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

Next, in the URL

localhost:8000/services?show=mydiv

, within the mounted hook of the component, you can implement the following script:

mounted() {
  // Add an ID to the targeted div for focus
  // Pass the ID through the query parameter
  document.getElementById(this.$route.query.show).scrollIntoView()
}

Please let me know if this method works for your needs.

Edit

An alternative approach to achieve the same result involves using a watcher and a computed property.

Start by creating a computed property for the 'show' query parameter in the route.

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

Then, set up a watcher to trigger the focus behavior.

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

This method should be effective in all scenarios.

Answer 2

If you want to emphasize a specific div within the Service component, you can utilize query parameters for this purpose. Additionally, you can create a dedicated URL that accomplishes the same goal.

Here is an example of a route:

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

Next, in the URL

localhost:8000/services?show=mydiv

, within the mounted hook of the component, you can implement the following script:

mounted() {
  // Add an ID to the targeted div for focus
  // Pass the ID through the query parameter
  document.getElementById(this.$route.query.show).scrollIntoView()
}

Please let me know if this method works for your needs.

Edit

An alternative approach to achieve the same result involves using a watcher and a computed property.

Start by creating a computed property for the 'show' query parameter in the route.

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

Then, set up a watcher to trigger the focus behavior.

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

This method should be effective in all scenarios.

Navigating to a specific div within a component in Vuejs 2: Steps for routing

Answer №1

Similar questions

D3 - Rounded edge chart width

Is the `beforeEach` function in Jasmine synchronized?

Leverage variables in Ajax to retrieve the data of an HTML element

Utilizing a JavaScript variable to fetch a rails URL: A comprehensive guide

Unable to retrieve information from localhost site using the expressjs API. I have attempted to use both vue-resource and axios in order to get the data without success

Any suggestions on how to incorporate the variable into the inline JavaScript [[]] API path?

React.js TypeScript Error: Property 'toLowerCase' cannot be used on type 'never'

Show only the lower left quadrant within the img tag during the prepend operation

"Put Jest to the test by running it with the Express

Numerous objects come into view as you scroll

The JSON object was not found in the AJAX response

How to Specify ContentType for a New Window in JavaScript after Submitting MVC Form

Trouble arises with the MUI 5 date picker when inputFormat is included

What sets returning a promise from async or a regular function apart?

Having difficulty in loading Socket.io client .js file?

What is the method for adding data to a table without utilizing an ID field?

"Exploring the challenges of implementing a jquerytools tooltip with AJAX

Forcing a property binding update in Angular 2

What is the best method to update numerous low-resolution image sources with higher resolution images once they have finished loading?

Generating a unique user ID similar to Zerodha's user ID using Node.js/JavaScript