假设 页面 /detail/1 上面有一个列表,上面有一个列表,分别需要跳转到 /detail/2, /detail/3 这种相同的页面,只是参数不同,需要跟进id调用接口刷新页面,请问该如何跳转,最好 url 地址也跟着改变
你正常写vue-router跳转的代码就行了,
文档有一个和你几乎一模一样的示例:
https://router.vuejs.org/zh/guide/advanced/navigation-guards#...
你在beforeRouteUpdate里发起请求数据,对详情相关的变量进行更新就好了
<script>
export default {
beforeRouteEnter(to, from) {
// 在渲染该组件的对应路由被验证前调用
// 不能获取组件实例 `this` !
// 因为当守卫执行时,组件实例还没被创建!
},
beforeRouteUpdate(to, from) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候,
// 由于会渲染同样的 `UserDetails` 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 因为在这种情况发生的时候,组件已经挂载好了,导航守卫可以访问组件实例 `this`
},
beforeRouteLeave(to, from) {
// 在导航离开渲染该组件的对应路由时调用
// 与 `beforeRouteUpdate` 一样,它可以访问组件实例 `this`
},
}
</script>
相信你在问这个问题的时候已经预先知晓 vue-router
动态路由 这个功能了。
const routes = [
// 动态字段以冒号开始
{ path: '/detail/:id', name:'detailPage', component: detailPage },
]
只是不知道如何携带 params
参数跳转。因为大部分时候我们都是使用 path
去跳转的,而不是 name
。
那么现在会有两种方式可以选择:
path
后方: this.$router.push('/detail/' + data.detail_id})
name
跳转:this.$router.push({ name: 'detailPage', params: { id: data.detail_id }}
ID
// vue2
export default() {
computed: {
detailId() {
return this.$route.params.id
}
}
}
#导航到不同的位置 - 编程式导航 | Vue Router
这得看你的 router-view
部分是如何设计的,如果是按照 fullPath
设置的,那么可以在组件的生命周期内 created/mounted
来触发接口请求。
如果没有显式声明或者使用 name
来设置的,那么需要你监听 computed
中 detailId
的改变来触发接口调用。
本文向大家介绍浅谈针对Vue相同路由不同参数的刷新问题,包括了浅谈针对Vue相同路由不同参数的刷新问题的使用技巧和注意事项,需要的朋友参考一下 在使用vue和vue-router开发spa应用时,我们会遇到这样一种问题。 当页面跳转时,组件本身并没有发生改变: 这时我们进行路由跳转后会发现组件并没有刷新,在前一个路由组件的数据都保留了下来,这并不是我们想要的效果。 对于简单的数据更新,我们可以直接
react路由如何像vue一样,用name的方式进行导航? 因为react路由用navigate('/home')这种形式,都是硬编码,以后万一要修改路径,那么所有路径都要改,很麻烦.而如果有vue路由的name的方式,只要name不变,路径随便改都可以. 下图是vue router的name方式,可以避免硬编码,那么react有什么办法可以达到该目的吗?
本文向大家介绍路由之间是怎么跳转的?有哪些方式?相关面试题,主要包含被问及路由之间是怎么跳转的?有哪些方式?时的应答技巧和注意事项,需要的朋友参考一下 首先最简单的方法: to里面可以写对象 方法二:编程式当行: this.$router.go/replace/push 注意这里有一个小bug,vue2.0-中没有捕获这个异常,就是多次点击请求同一个路由会报错误,你可以手动捕获异常 在mins.j
假设管理员用户admin有一个路由页面/admin是普通用户不能访问的,现在普通用户user通过某种手段使用addRoutes将这个/admin页面添加到了自己的路由列表中,这样也能访问/admin页面了,请问这种情况前端和后端分别应该怎么处理,感觉前端阻止不了这个操作,后端如何限制呢
调用第三方接口获取的用户信息。我想保存下来。然后再提供个查询用户信息的接口。 然后我再获取的时候赋值。 userInfo.setUserInfo(userinfo); 然后再提供个get接口 看着好像没问题。set的时候能打印到值。get的时候就没了。
本文向大家介绍Vue实现路由跳转和嵌套,包括了Vue实现路由跳转和嵌套的使用技巧和注意事项,需要的朋友参考一下 一、配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 安装完成后,在 src 文件夹下,创建一个 routers.js 文件,和 main.js 平级 然后在 router.js 中引入所需的组件,创建 routers 对
本文向大家介绍vue-router如何响应路由参数的变化?相关面试题,主要包含被问及vue-router如何响应路由参数的变化?时的应答技巧和注意事项,需要的朋友参考一下 ickt-5: 路由 vue-router 面试题: https://blog.csdn.net/Arthas_Xue/article/details/101024666 在父组件的router-view上加个key: http
route(Object) 此为一个路由跳转方法,内部是对uni多个路由跳转api的封装,更方便使用 Object参数说明: 参数名 类型 默认值 是否必填 说明 type String navigateTo false navigateTo或to对应uni.navigateTo,redirect或redirectTo对应uni.redirectTo,switchTab或tab对应uni.swit