来讲解一下“vue-router 2.0 跳转之router.push()用法说明”的完整攻略。
vue-router 2.0 跳转之router.push()用法说明
router.push()
是 vue-router 用来跳转页面的一个方法。在通常的前后端分离开发中,当我们需要跳转页面时,只需要使用 router.push()
就可以了。
这个方法接受一个字符串类型的路径作为参数,然后进行跳转。同时,你也可以通过传递一个或多个配置对象来指定跳转行为,例如修改路由的 query 或 hash 值。
// 通过字符串路径跳转到 /home
this.$router.push('/home')
// 通过对象来进行路由的更加详细配置(跳转到 /home,并带上 query)
this.$router.push({ path: '/home', query: { name: 'John' }})
示例1:通过 router.push() 跳转到指定页面
<template>
<div>
<!-- 这里通过点击按钮来触发路由的跳转 -->
<button @click="jumpToPage">Go to Page 2</button>
</div>
</template>
<script>
export default {
methods: {
jumpToPage () {
// 点击按钮后,会跳转到带有指定 id 的页面
this.$router.push({ path: '/page', query: { id: '2' }})
}
}
}
</script>
当点击按钮时,会跳转到对应的 /page
页面,并带上 id=2
的查询参数。
示例2:通过 router.push() 动态跳转页面
<template>
<div>
<div v-for="page in pages" :key="page.id">
<!-- 这里通过「:to」属性来动态指定跳转到哪个页面 -->
<router-link :to="{ path: '/page', query: { id: page.id }}">
{{ page.title }}
</router-link>
</div>
</div>
</template>
<script>
export default {
data () {
return {
pages: [
{ id: '1', title: 'Page 1' },
{ id: '2', title: 'Page 2' },
{ id: '3', title: 'Page 3' },
{ id: '4', title: 'Page 4' },
{ id: '5', title: 'Page 5' }
]
}
}
}
</script>
这个示例中,我们使用 v-for
来动态生成页面列表,然后使用 router-link
组件来进行跳转。每个页面都会带上不同的 id
值,跳转时也会根据不同的 id
值来动态指定跳转到哪个页面。这样就可以让页面的跳转更加智能和动态。
好了,以上就是“vue-router 2.0 跳转之router.push()用法说明”的完整攻略。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue-router 2.0 跳转之router.push()用法说明 - Python技术站