anchor tags in <parallax-view>



  • Is it possible to use anchor tags in a parallax-view?
    Or should I set up vue-router in a particular way?

    (this is for a website btw)

    <a href="#about">About</a>
    Somewhere down the page...
    <span id="about">...</span>
    




  • @Martin
    Here are the steps to get it working… (only works for web sites)

    BTW: what is the best way to add smooth scrolling when jumping to an anchor tag. (css, js ?)

    1. change config/index.js (enable history mode)
      line 7: publicPath=’/’
      0_1478705018568_upload-4af19504-8e31-4ba3-83d7-c1606db86261
    1. slightly change the router.js into this…(basically only adding a scrollBehaviour function to router object
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    /*
     Avoid lazy loading while in dev mode
     to benefit from HMR
     */
    function load (name) {
      if (process.env.NODE_ENV === 'development') {
        return require('components/' + name + '.vue')
      }
      else {
        return (resolve) => {
          require('bundle?lazy!components/' + name + '.vue')(resolve)
        }
      }
    }
    
    // scrollBehavior:
    // - only available in html5 history mode
    // - defaults to no scroll behavior
    // - return false to prevent scroll
    const scrollBehavior = (to, from, savedPosition) => {
      if (savedPosition) {
        // savedPosition is only available for popstate navigations.
        return savedPosition
      }
      else {
        const position = {}
        // new navigation.
        // scroll to anchor by returning the selector
        if (to.hash) {
          position.selector = to.hash
        }
        // check if any matched route config has meta that requires scrolling to top
        if (to.matched.some(m => m.meta.scrollToTop)) {
          // cords will be used if no selector is provided,
          // or if the selector didn't match any element.
          position.x = 0
          position.y = 0
        }
        // if the returned position is falsy or an empty object,
        // will retain current scroll position.
        return position
      }
    }
    
    const router = new VueRouter(
      {
        mode   : 'history',
        base   : __dirname,
        scrollBehavior,
        routes : [
          {
            path : '/', component : load('index'), meta : {scrollToTop : true}
          }
        ]
      }
    )
    
    export default router
    

  • Admin

    Some more things worth mentioning. I’ll just copy paste my comment on the latest Quasar starter kit / template:

    /*
       * NOTE! VueRouter "history" mode DOESN'T works for Cordova builds,
       * it is only to be used only for websites.
       *
       * If you decide to go with "history" mode, please also open /config/index.js
       * and set "build.publicPath" to something other than an empty string.
       * Example: '/' instead of current ''
       *
       * If switching back to default "hash" mode, don't forget to set the
       * build publicPath back to '' so Cordova builds work again.
       */
    

    Also, changing the “publicPath” should be carefully considered as it impacts the way you reference static assets.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.