anchor tags in <parallax-view>

Martin

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

@Martin I think this probably answers all.

https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js

Martin

@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 ?)

change config/index.js (enable history mode)
line 7: publicPath=’/’
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

rstoenescu

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.

No More Posting New Topics!

anchor tags in <parallax-view>