Vue 动态路由入门

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