admin管理员组文章数量:1633773
一、路由传值:
1、通过路由的路径带参数(url中显示参数),同时配置路由的时候也要带上参数,获取参数使用this.$route.params.id,直接拿路由里面的参数。
toRouter(){
var id = 1;
var type = 2;
this.$router.push({
//path:"/路径名/"+ 参数1 + "/" + 参数2,
path:"/content/"+ id +"/"+ type
});
}
router.js需配置
{
path:"index/:id",
name:"index",
component: Index
}
//传多个参数
{
path:"index/:id1/:id2",
name:"index",
component: Index
}
//相同路由有参数和无参数(需把有参数的放在无参数的前面)
{
path:"index/:id",
name:"index",
component: Index
},
{
path:"index",
name:"index",
component: Index
}
2、不用在router.js路由页配置参数来接收(url中不显示参数,刷新页面会丢失传递过来的参数),而是通过name或者path去跳转(name和path写法一样,区分name和path)
//通过name跳转
toRouter(){
this.$router.push({
name:"content",
params:{
content:this.content,//指定值或者获取的值
page:"1", //其他需要传递的参数
}
})
}
//通过path跳转
toRouter(){
this.$router.push({
path:"/content",
params:{
content:this.content,//指定值或者获取的值
page:"1", //其他需要传递的参数
}
})
}
目标接收组件,例如:content.vue
created(){
this.getRouter();
}
methods:{
getRouter(){
this.content = this.$route.params.content;
this.page = this.$route.params.page;
}
}
二、路由扩展:
1、$router和$route的区别
$router是router构造方法全局路由的实例。当导航到不同url,可以使用this.$router.push方法,这个方法则会向history里面添加一条记录,当点击浏览器回退按钮或者this.$router.back()就会回退之前的url。
$route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。如path,name等。
2、路由跳转分为编程式和声明式
声明式:
//路由入口
<router-link :to="路由地址">
//视图出口 在一个页面嵌套子路由,并且不跳转页面,子页面就会渲染在router-view的地方
<router-view></router-view>
<router-link to="/index">首页</router-link>
// 字符串
<router-link to="millia"> to millia</router-link>
// 对象
<router-link :to="{path:'millia'}"> to millia</router-link>
// 命名路由
<router-link :to="{name: 'milliaPath'}"> to millia</router-link>
//直接路由带查询参数query,地址栏变成 /milliaPath?color=red
<router-link :to="{path: 'milliaPath', query: {color: 'red' }}"> to millia</router-link>
// 命名路由带查询参数query,地址栏变成/milliaName?color=red
<router-link :to="{name: 'milliaName', query: {color: 'red' }}"> to millia</router-link>
//直接路由带路由参数params,params 不生效,如果提供了 path,params 会被忽略
<router-link :to="{path: 'milliaPath', params: { color: 'red' }}"> to millia</router-link>
// 命名路由带路由参数params,地址栏是/milliaName/red
<router-link :to="{name: 'milliaName', params: { color: 'red' }}"> to millia</router-link>
编程式:(如提供了path,那么params和query的配置就会被忽略)
// 字符串
router.push('millia')
// 对象
router.push({ path: 'millia' })
// 命名的路由
router.push({ name: 'user', params: { userId: 'millia' }})
// 带查询参数,变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
path:'name'和path:'/name'的区别
//比如当前路径是home
this.$router.push({path:'name'})//==>path为/home/name
this.$router.push({path:'/name'})//==>path为/name
版权声明:本文标题:Vue路由传值 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729175726a1188688.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论