Vue---在vue中路由传递动态参数的使用

一.模板组件中

1.通过es6字符串拼接的方式拼接动态参数article.art_id

  <van-cell class="article-item" :to="`/article/${article.art_id}`">
  </van-cell>

2.通过对象属性

 <van-cell
    class="article-item"
    :to="{
      //根据路由名称进行跳转
      name: 'article',
      //传递路由动态参数
      params: {
        //属性名，路由路径中设计的动态参数名称
        articleID: article.art_id,
      },
    }"
  >
  </van-cell>

二、路由配置对象中

    {
        path: '/article/:articleID',
        name: 'article',
        component: () =>
            import ('../views/article')
    }