vue2中实现动态路由,这里我主要是根据页码进行动态显示,
首先配置动态路由:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Page from './components/Page.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/page/:id',
name: 'page',
component: Page,
props: true
}
]
const router = new VueRouter({
routes
})
new Vue({
router,
render: h => h(App)
}).$mount('#app')
在Vue2中,你可以通过$route.params对象来动态获取路由参数。初始化页码:
this.ipagination.current = parseInt(this.$route.params.id) || 1;
this.$route.path // 获取路由路径
this.$route.params // 获取路由参数
this.$route.query // 获取查询参数
this.$route // 获取整个路由信息
这里就不具体写了,提供思路,当我们每次刷新页面的的时候在created生命周期函数中拿到路由页码参数也就是this.ipagination.current
= parseInt(this. r o u t e . p a r a m s . i d ) ∣ ∣ 1 ; 进行获取 , 然后当我们每次点击页码的时候都实时的刷新路由具体就是通过 t h i s . route.params.id) || 1;进行获取,然后当我们每次点击页码的时候都实时的刷新路由具体就是通过 this. route.params.id)∣∣1;进行获取,然后当我们每次点击页码的时候都实时的刷新路由具体就是通过this.router.push({path:
/page/${this.ipagination.current}
});更新路由,这样就可以每次更新路由的同时,在created生命周期函数中获取到最新的页码,然后再像后端发送请求