Vue.jsでページ内リンクを使うなら「vue-scrollto」を使え - 動かざることバグの如し
結論 Vue.jsでページ内リンク（いわゆるアンカーリンク）を使いたいならvue-scrolltoを使ったほうが幸せになれる そもそもアンカーリンクって何 アンカーリンク自体死語な気がするが、いわゆるページ内リンク リンクをクリックすることで同じページ上の任意の場所へジャンプしてくれる機能がある。そのリンクがアンカーリンクってやつ 仕様的には「http://example.com#hoge」とやると <div id="#hoge"> コンテンツ </div> までジャンプしてくれる vue-scrolltoを使うメリット もちろんアンカーリンク貼るだけならvue-scrolltoなくてもなんとかなるが、 スムーススクロールを簡単に設定できる(アニメーションを意識しなくて良い offsetで任意のDOMの○px上/下へズラしてジャンプできる(offset機能 コールバックが実装できる 等があ
【VueRouter】ページ切替時にアンカーリンクで遷移させるVueの設定
VueRouterでアンカーリンクを有効にする to.hashでハッシュの値（例:#example）を取得できます。 Vue.use(Router); export default new Router({ mode: 'history', scrollBehavior: (to, from, savedPosition) => { if (savedPosition) { return savedPosition; } if (to.hash) { return {selector: to.hash} } return {x: 0, y: 0}; }, routes: [] }) ページ読み込み後、スクロールする ページ読み込み後、スクロールさせるためには以下のように設定します。 Vue.use(Router); export default new Router({ mode: 'hi
Vue.jsのrouter-linkにアンカーリンクを設定する
Vue.jsのrouter-linkにアンカーリンクを設定する 2019.10.02 Coding Vue.js hash, router-link, アンカー, アンカーリンク, ハッシュタグ 遷移先の項目にアンカー移動したいときなど、router-linkの指定を行うことで「#hashtag」を末尾に追加出来る <router-link :to="{ name: 'hogeProject', hash: '#hashtag' }" > ページを移動する </router-link> ただしこのままでは、URL末尾にハッシュがつくのみであり、移動はまだ行われない。 ページ遷移後に移動を行うためには、下記の処理を遷移先ページで指定する必要がある。 <script> export default { mounted() { const hash = this.$route.hash; if
[VUE.JS]Vue Router使用時にページ内アンカーにリンクする方法 - D-NET
Vue.jsを使用しているプロジェクトで、ページ内のアンカーポイントにリンクするボタンの実装をしました。 単純に、 <a href="#xxxx">テストリンク</a> でいいのかと思ったら、上記で実装した場合、アンカーに飛ぶには飛ぶのですが、ページのURLが/#xxxxになってしまいました。 リロードするまでは、正常に動作していたんですが、リロードしたら真っ白に！ Vue Routerの設定によっては、そもそもアンカーが動作しなかったりする場合もあります。 ということで、下記のように解決しました。 scrollIntoViewでアンカーポイントまでスクロールする まずは、同ページ内のアンカーに遷移してみます。 javascriptを使用して移動させる方法です。 単純ですが、動作にブレが無くいい感じです。 // button part <a class="btn-primary" @cli
![[VUE.JS]Vue Router使用時にページ内アンカーにリンクする方法 - D-NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/c27e149125edc3a298e8079c5ded3b82c0ddae2a/height=288;version=1;width=512/https%3A%2F%2Fforsmile.jp%2Fwp-content%2Fuploads%2F2016%2F01%2Fcropped-icon-dnet-1.png){kind=icon}
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
