vue router编程式导航
一、通过js跳转页面
导航有 router-link
1.1 新建一个Page.vue文件
<template>
<button @click="goPage">js跳转页面-按钮</button>
</template>
<script>
export default {
methods: {
goPage() {
//console.log(this.$router) //打印$router
//this.$router.push('/') // 字符串路径
//this.$router.push({path:"/"}) // 带有路径的对象
//this.$router.push({path:'/user/123'}) //带有路径对象的参数
//this.$router.push({name:'user',params:{id:1234}})//另一种形式
//this.$router.push({path:"about",query:{name:"LLT"}})//带查询参数?
//替换当前位置
//this.$router.push({path:"about",query:{name:"LLT"},replace:true})
this.$router.replace({ path: "about", query: { name: "LLT1" } })
}
}
}
</script>
1.2 配置路由器index.js
const routes = [
{path:'/page',component:Page},//js跳转页面
]
1.3 配置App.vue
<router-link to="/page">js跳转页面</router-link>
二、替换当前位置
this.$router.push({path:"about",query:{name:"LLT"},replace:true})
this.$router.replace({path:"about",query:{name:"LLT1"}})
三、后退一步
this.$router.go(-1)
this.$router.back()//后退,等于go(-1)
this.$router.forword() //前进，等于go(1)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/107036.html
