div地址跳转 vue_vue跳转页面的几种方法(推荐)
vue跳转不同页面的多种方法1:router-link跳转点击跳转2点击跳转1点击跳转32:this.$router.push()点击跳转4export default{name:'test',methods:{goTo(){//直接跳转this.$router.push('/testDemo');//带参数跳转this.$router.push({path:'/testDemo',query:{
vue跳转不同页面的多种方法
1:router-link跳转
点击跳转2
点击跳转1
点击跳转3
2:this.$router.push()
点击跳转4
export default{
name:'test',
methods:{
goTo(){
//直接跳转
this.$router.push('/testDemo');
//带参数跳转
this.$router.push({path:'/testDemo',query:{setid:123456}});
this.$router.push({name:'testDemo',params:{setid:111222}});
}
}
}
params和query传参数有什么不一样??在地址栏中可以看到,params传参数时,地址栏中看不到参数的内容,有点像ajax中的post传参,query传参数时,地址栏中可以看到传过来的参数信息,有点像ajax的个体传参
如果单独传setId一个参数的时候,地址栏中的地址如下图:
第一种方式:path - query 传参
第二种方式:name - params传参数
但是一般情况下,传参数是传递一个对象,当传递的是一个对象的时候,地址栏中的地址如下图:
第一种方式:path - query 传参
第二种方式:name - params传参数
3:a标签可以跳转么??可以跳转外部链接,不能路由跳转
接收方怎么接收参数??this.$route.query.serid和this.$route.params.setid,以下举一个接收的例子
注意接收参数时是 $route 不是 $router
testDemo{{this.$route.query.setid}}
知识点补充:vue三种不同方式实现页面跳转
Vue:router-lin
[跳转到主页]
[登录]
[登出]
this.$router.push("/");
[跳转到主页]
export default {
name: "App",
methods: {
// 跳转页面方法
goHome() {
this.$router.push("/");
},
}
this.$router.go(1);
[上一页]
[下一页]
upPage() {
// 后退一步记录,等同于 history.back()
this.$router.go(-1);
},
downPage() {
// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1);
}
代码示例:
[跳转到主页]
[登录]
[登出]
[跳转到主页]
[上一页]
[下一页]
export default {
name: "App",
methods: {
// 跳转页面方法
goHome() {
this.$router.push("/");
},
upPage() {
// 后退一步记录,等同于 history.back()
this.$router.go(-1);
},
downPage() {
// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1);
}
}
};
总结
到此这篇关于vue不同方法跳转页面的几种方法的文章就介绍到这了,更多相关vue 跳转页面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
本文标题: vue跳转页面的几种方法(推荐)
本文地址: http://www.cppcns.com/wangluo/javascript/304022.html
更多推荐
所有评论(0)