前提
- 環境準備方法
bash
1$ vue init webpack my-project 2$ cd my-project 3$ npm install 4$ npm run dev
- Vue.js で下記2つの画面を用意しています。
- ユーザー一覧 (Users)
- ユーザー詳細 (UserDetail)
問題点
聞きたいこと
常に前のページのスクロール位置を記憶してその場所にスクロールさせたいです。
試したこと
- scrollBehavior を実装した。
→ scrollBehavior が呼ばれない為効果がなかった。
ソースコード
- /my-project/src/main.js
js
1import Vue from 'vue' 2import App from './App' 3import router from './router' 4 5Vue.config.productionTip = false 6 7/* eslint-disable no-new */ 8new Vue({ 9 el: '#app', 10 router, 11 template: '<App/>', 12 components: { App } 13}) 14
- /my-project/src/router/index.js
js
1import Vue from 'vue' 2import Router from 'vue-router' 3import Users from '@/components/Users' 4import UserDetail from '@/components/UserDetail' 5 6Vue.use(Router) 7 8export default new Router({ 9 routes: [ 10 { path: '/users', name: 'Users', component: Users }, 11 { path: '/user/:id', name: 'UserDetail', component: UserDetail } 12 ], 13 scrollBehavior (to, from, savedPosition) { 14 console.log('scroll behavior') 15 if (savedPosition) { 16 console.log(savedPosition) 17 return savedPosition 18 } else { 19 return { x: 0, y: 0 } 20 } 21 } 22})
- /my-project/src/App.vue
html
1<template> 2 <div id="app"> 3 <router-view></router-view> 4 </div> 5</template> 6 7<script> 8export default { 9 name: 'app' 10} 11</script>
- /my-project/src/components/Users.vue
html
1<template> 2 <div class="users"> 3 <ul v-for="user in users" :key="user.id"> 4 <li><router-link :to="'/user/' + user.id">{{user.name}}</router-link></li> 5 </ul> 6 </div> 7</template> 8 9<script> 10import axios from 'axios' 11 12export default { 13 name: 'users', 14 data () { 15 return { 16 users: null 17 } 18 }, 19 methods: { 20 getUsers () { 21 var url = 'https://gist.githubusercontent.com/anonymous/f40a3124bf4885a6a97fe6506043e582/raw/32f3edb1239d5b806d586bbf9035138cdb73c401/users.json' 22 axios.get(url).then(x => { this.users = x.data }) 23 } 24 }, 25 mounted () { 26 this.getUsers() 27 } 28} 29</script>
- /my-project/src/components/UserDetail.vue
html
1<template> 2 <div class="userDetail"> 3 <h1>ユーザー詳細</h1> 4 </div> 5</template> 6 7<script> 8export default { 9 name: 'userDetial' 10} 11</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/10 14:49