文章详情页----- 详细步骤

最新推荐文章于 2021-03-13 00:20:35 发布

yj_xy

最新推荐文章于 2021-03-13 00:20:35 发布

阅读量688

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/yj_xy/article/details/108680339

版权

文章详情页--------------
1.插入模板
1.1, 类名:class=“article-container”
1.2, 组件名字:name: ‘ArticleIndex’
2.配置路由
2.1,一级动态路由
path: ‘/article:articleId’,
name: ‘article’,
component: () => import(’@/views/article’),
props: true //开启Props传参,说白了就是把路由参数映射到组件的props数据中
3.文章详情页组件中添加跳转事件 :to="’/article/’+ article.art_id"
:to="{
//根据路由名称进行跳转
name:‘article’,
//传递路由动态参数
params:{
//属性名:路由路径中设计的的动态参数名称
articleId:article.art_id
}
}"
4. 使用组件的props来解耦路由传参 :
1.访问路由里的动态参数,首先找到 $router ->params->articleId->,比较麻烦
2.想要在别的地方重用,不灵活父传子 props传递
3.:当当前组件声明 props 来接收参数articleId
articleId:{
type:[Number,String], //参数类型
required:true //必要
}
4. 可以直接访问props中的参数