1.结构
2.配置详情页路由
router.config.js
/** * 配置 路由 */// 导入组件import Home from './components/Home.vue'import Follow from './components/Follow.vue'import Column from './components/Column.vue'import UserInfo from './components/UserInfo.vue'import Article from './components/Article.vue'// 导出路由数组export default [ { // 首页 path:'/home', component:Home }, { // 关注页 path:'/follow', component:Follow }, { // 栏目页 path:'/column', component:Column }, { // 我的页 path:'/user-info', component:UserInfo }, { // 文章详情页 path:'/article/:id', component:Article }, { // 配置默认路由 path:'/', redirect:'/home' // 路由重定向 }, { path:'*', redirect:'/home' // 路由重定向 }] 3.通过 router-link路由 跳转详情页
Home.vue
{ {index}}.{ {item.title}}
{ {item.detail}}
4.通过 正则 获取 path 中的 id, 并 通过 id 获取该详情页信息
Article.vue
5.效果图
