console
const Home = {
template: '<van-dialog v-model="show" title="输入验证码"> <van-button class="left_x" v-on:click="loginPhone"> < </van-button> </van-dialog>',
data () {
return {
show: true
}
},
methods: {
loginPhone () {
this.$router.push('foo')
}
}
}
const Foo = { template: '<van-dialog v-model="show" title="登录" confirm-button-text="下一步" :before-close="beforeClose" > </van-dialog>',
data () {
return {
show: true,
phone: ''
}
},
methods: {
beforeClose (action, done) {
if (action === 'confirm') {
this.$router.push({path: '/', query: {'mobile': this.phone}})
} else {
done()
}
}
}
}
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo }
]
})
router.afterEach(function (to, from) {
if (!to.hash) return
var top = document.getElementById(to.hash.slice(1)).offsetTop
window.scrollTo(0, top)
})
new Vue({
router,
el: '#app',
})
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant/lib/vant.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<router-link to="/">/home</router-link>
<router-link to="/foo">/foo</router-link>
<pre>{{ $route.hash }}</pre>
<router-view></router-view>
</div>
@import url("//unpkg.com/vant/lib/vant-css/index.css");
.left_x {
position: absolute;
top: 3px;
background-color: #ffffff
}
.left_x span {
color: #000000;
}