vue 路由进阶
$router:路有管理对象
$route:每条路有的对象
push跳转
name+params
this.$router.history.push({
name:"路有名称",
params:{
"属性名称":{
}
}
})
path+query
this.$router.history.push({
path:"/路径",
query:{
"属性名称":"值"
}
})
this.$router.history.push({
name:"路有名称",
query:{
"属性名称":"值"
}
})
router-link
<router-link :to={name:"路有名称",params:{"属性名称":"属性值"}}></router-link>
动态路径参数
首先在路由配置文件中,修改路径,增加通配符
const routes = [
{
// 动态路径参数 以冒号开头
path:"/details/:参数名称"
}
]
<router-link :to="`/details/${参数的值}`"></router-lin>
2、获取路有传递数据
name+params
this.$route.params.属性名称
path+query
this.$route.query.属性名称
to={}
this.$route.query.属性名称
to+动态路径参数
this.$route.query.属性名称
3、路由元数据
可以在定义组件路由时,给每一个路由对象添加一些额外的属性
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta:{
isShowTabbar:true
}
},
{
path:"/category",
name:"Category",
component: Category,
meta:{
isShowTabbar:true
}
},
{
path:"/cart",
name:"Cart",
component: Cart,
meta:{
isShowTabbar:true
}
},
{
path:"/mine",
name:"Mine",
component: Mine,
meta:{
isShowTabbar:true
}
},
{
path:"/details",
name:"Details",
component:()=>import("../views/Details.vue"),
meta:{
isShowTabbar:false
}
}
]
可以通过组件的this.$route对象去获取
this.$route.meta.属性名称