vue中动态路由写法

1.router.js 

// 我的作品
    {
      path: '/UserArticle/:type?',//UserArticle /UserArticle/a /UserArticle/b
      name: 'UserArticle',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ '../views/UserArticle/UserArticle'),
      props: true
    },

2.页面接收参数UserArticle.vue

<!--
 * @Author: your name
 * @Date: 2020-07-21 20:50:21
 * @LastEditTime: 2020-07-22 06:23:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \今日头条Demo\src\views\UserArticle\UserArticle.vue
--> 
<style lang="less" scoped>
.UserArticle {
}
</style>
<template>
  <div class="UserArticle">
    <!-- 导航栏,动态路由参数的跳转 -->
    <van-nav-bar title="我的收藏/历史/作品" left-arrow @click-left="@click="$router.push({
        name: 'article',
        params:{
          articleId:article.art_id.toString()
        }"></van-nav-bar>
    <!-- 标签页 -->
    <van-tabs v-model="active">
      <van-tab title="我的收藏">
        <kv-collect></kv-collect>
      </van-tab>
      <van-tab title="我的历史">
        <kv-history></kv-history>
      </van-tab>
      <van-tab title="我的作品">
        <kv-userarticle></kv-userarticle>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import userarticle from "../../components/UserArticle/article";
import history from "../../components/UserArticle/history";
import collect from "../../components/UserArticle/collect";
export default {
  name: "UserArticle",
  components: {
    "kv-userarticle": userarticle,
    "kv-history": history,
    "kv-collect": collect,
  },
  props: {
    type:{
      type: String
    }
  },
  data() {
    let active = ['collect','history'].indexOf(this.type)
    if(active === -1){
      active = 2
    }
    return {
      active,
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {}
};
</script>