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.