如何在js进行跳转路由
在一些需求中，我们需要不用点击a标签或者router-link，但是也要实现路由跳转，比如登陆，点击按钮搜索跳转。那么这种情况如何进行跳转呢？
直接再按钮绑定的方法中写this.$router.push('路由路径')即可。
代码示范 this.$router.push("/跳转路径") 或者 this.$router.push({path:"/跳转路径"})：
<template>
<div>
<!-- 模板语法获取参数 -->
<p>我的首页</p>
<input v-model="ind">
<button @click="search">搜索</button>
</div>
</template>
<script>
export default {
data(){
return{
ind:''
}
},
methods:{
search(){
//下面两种方式都可以
// this.$router.push("/fine")
this.$router.push({
path:'/fine'
})
}
}
};
</script>
还有第二种方法，通过给路由配置名称，在通过名称跳转(使用与path路径较于长的时候)：
这是通过在路由模块配置路由时，为路由增加一个名称属性，这样就可以通过路由名称跳转路径了： {name:'路由名称',path:"/路由路径",component:页面组件},
const router = new VueRouter({
// mode:"history",
routes:[
{path:"/",redirect:'/index'},
//添加路由名称
{name:'f',path:"/fine",component:MyFine},
{path:"/friend",component:MyFriend},
{path:"/index",component:MyIndex},
{path:"*",component:NotFind}
],
linkActiveClass:"active",
linkExactActiveClass:"exact-active"
});
export default router;
在通过name的值进行跳转：
<template>
<div>
<!-- 模板语法获取参数 -->
<p>我的首页</p>
<input v-model="ind">
<button @click="search">搜索</button>
</div>
</template>
<script>
export default {
data(){
return{
ind:''
}
},
methods:{
search(){
this.$router.push({
//通过路由名称跳转
name:'f'
})
}
}
};
</script>
如何通过 this.$router.push("/跳转路径") 或者 this.$router.push({path:"/跳转路径"})进行传参？
使用path路径跳转传参两种方式：
1. 使用直接在路径后面跟上传递参数：
this.$router.push( '/路径?参数名1=参数值1&参数2=参数值2')
代码示范：
<template>
<div>
<!-- 模板语法获取参数 -->
<p>我的首页</p>
<input v-model="ind">
<button @click="search">搜索</button>
</div>
</template>
<script>
export default {
data(){
return{
ind:''
}
},
methods:{
search(){
//直接使用？跟参数 &连接多个参数
this.$router.push("/fine?id=1&name=张三")
}
}
};
</script>
2.或者使用对象的方式：
this.$router.push({
//使用对象的方式可以将path改为配置的路由name属性
path:'/路径',
query:{
参数名1:参数值1
参数名2: 参数值2
}
})
代码示范：
<template>
<div>
<!-- 模板语法获取参数 -->
<p>我的首页</p>
<input v-model="ind">
<button @click="search">搜索</button>
</div>
</template>
<script>
export default {
data(){
return{
ind:''
}
},
methods:{
search(){
this.$router.push({
//使用对象的方式可以将path改为配置的路由name属性
path:'/fine',
//添加query属性直接传参
query:{
id:1,
name:"张三"
}
})
}
}
};
</script>
以上的两种方式传参都是通过 this.$router.query.参数名称在跳转页面获取参数的。
使用path路径的动态路由传参：：
1. 使用直接在路径后使用/连接参数值：
动态路由传参首先要把路由模块的路由配置改为 {path:"/friend/:参数名?",component:MyFriend},
this.$router.push( '/路径/参数值')
代码示范：
<template>
<div>
<!-- 模板语法获取参数 -->
<p>我的首页</p>
<input v-model="ind">
<button @click="search">搜索</button>
</div>
</template>
<script>
export default {
data(){
return{
ind:''
}
},
methods:{
search(){
//直接使用/连接参数
this.$router.push("/fine/张三")
}
}
};
</script>
2.或者使用对象的方式：
this.$router.push({
//使用对象的方式可以将path改为配置的路由name属性
path:'/路径',
params:{
参数名1:参数值1
}
})
代码示范：文章来源：https://www.toymoban.com/news/detail-709077.html
<template>
<div>
<!-- 模板语法获取参数 -->
<p>我的首页</p>
<input v-model="ind">
<button @click="search">搜索</button>
</div>
</template>
<script>
export default {
data(){
return{
ind:''
}
},
methods:{
search(){
this.$router.push({
//使用对象的方式可以将path改为配置的路由name属性
path:'/fine',
//添加query属性直接传参
params:{
name:"张三"
}
})
}
}
};
</script>
以上的两种方式传参都是通过 this.$router.params.参数名称在跳转页面获取参数的。文章来源地址https://www.toymoban.com/news/detail-709077.html
到了这里，关于【vue2第十七章】VueRouter 编程式导航跳转传参(点击按钮跳转路由和如何传递参数)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
