Vue 动态路由（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>

成果

进入项目页面，点击列表

点击“新闻100”

点击“新闻200”

相关文章

vue嵌套路由：嵌套路由教学