Getting Started with Vue Dynamic Routing

1 What is dynamic routing

Depending on the path, the displayed content is different. Just like the image path: image/1, the "1" changes in it, and different images will be displayed according to the change of this number.

2 pages written

Create item.vue under the src/components path, where the content is (of course, you can also use other names you want without using id)

<template>
    <div >
        传递来的数据是： {
    
    {
    
     $route.params.id }}
    </div>
</template>

If you want to use this id value in the script (script tag), you can write like this

this.$route.params.id

3 Modify routing

Modify src/router/index.js and introduce item component

import item from '@/components/item'

Add routing settings (if you use another name in the item, the id here should also be changed to the same)

    {
    
    
      path: '/item/:id',
      name: 'Item',
      component: item
    }

4 modify the list

Modify src/components/list.vue, add link

<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>

Reprinted in https://blog.csdn.net/qq_42120178/article/details/95080160