一、VUE页面跳转路由指定方式:路由可以通过name指定,也可以通过path指定;
二、VUE页面跳转带参数方式:参数可以封装在params中,也可以封装在query中。
1、params传参数:类似post,导航栏不显示参数。html 取参 $route.params.id,script 取参 this.$route.params.id,刷新页面参数消失;
2、query传参数: 类似get,导航栏url后面会显示参数。html 取参 $route.query.id,script 取参 this.$route.query.id,刷新页面参数还在。
举例:
跳转页面:
methods:{
update(user) {
this.saveSearchData();
this.$router.push({
path: "/sessionstore/detail",
query: {
userNickName: user.userNickName,
userName: user.userName
}
});
}
}
接收页面:
export default {
data() {
return {
userName: "",
userNickName: ""
};
},
created() {
this.userName = this.$route.query.userName;
this.userNickName = this.$route.query.userNickName;
}
};
三、VUE跳转方式:主要有以下几种, router-link,$route。
$router
:是路由操作对象,只写对象;$route
:路由信息对象,只读对象。
1、router-link
(1)不带参数:name,path都行, 建议用name
name方法:
<router-link :to="{name:'home'}">
path方法:path法,router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。
<router-link :to="{path:'/home'}">
(2)带参数:query、params都可以。其中query传参路由可不配置
<router-link :to="{name:'home', query: {id:1}}">
params传参:路由配置 path: "/home/:id" 或者 path: "/home:id"。不配置path ,第一次可请求,刷新 页面id会消失;配置path,刷新页面id会保留。
<router-link :to="{name:'home', params: {id:1}}">
2、this.$router.push() (函数里面调用):
(1)不带参数:
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
(2)带参数:
query传参:name、path都可以用
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
params传参:只能用 name
this.$router.push({name:'home',params: {id:'1'}})
3、this.$router.replace:用法同上push
4、this.$router.go(n) :向前或者向后跳转n个页面,n可为正整数或负整数,如返回上一页
this.$router.go(-1)
区别:
(1)this.$router.push跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面;
(2)this.$router.replace
跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)
(3)this.$router.go(n)
向前或者向后跳转n个页面,n可为正整数或负整数