1 什么是动态路由
根据路径不同,显示内容不同。就像图片路径:image/1 ,其中变化的就是这个“1”,根据这个数字的变化会展示不同的图片。
2 页面编写
在src/components路径下创建item.vue,其中内容为(当然你也可以不使用id,使用别的你想要的名字)
<template>
<div >
传递来的数据是: {{ $route.params.id }}
</div>
</template>
如果你想在脚本(script标签)中使用这个id值,可以这么写
this.$route.params.id
3 修改路由
修改src/router/index.js,引入item组件
import item from '@/components/item'
添加路由设置(在item中你使用的如果是别的名字,这里的id也要改成相同的)
{
path: '/item/:id',
name: 'Item',
component: item
}
4 修改list
修改src/components/list.vue, 增加链接
<template>
<div>
这是一个列表
<router-link to="/item/100">新闻100</router-link>
<router-link to="/item/200">新闻200</router-link>
<router-link to="/item/300">新闻300</router-link>
</div>
</template>
转载于 https://blog.csdn.net/qq_42120178/article/details/95080160