Vue-router动态路由配置：玩转组件动态加载，解锁参数匹配技巧

你知道vue-router动态路由配置？它可以让组件动态加载，所以我们只要在组件里面根据不同的$route参数显示不同的内容就行了。这样确实提高了效率，但也增加了组件的复杂度。还有就是，虽然可以实现组件的动态切换，但看起来并不那么流畅自然。下面这个简单的实例教大家弄懂这个概念！

每次想要动态参数运行不同组件怎么办？别着急，看我这妙招！

const router = new VueRouter({
 routes: [
  // 动态路径参数 以冒号开头
  { path: '/user/:id', component: User, props: true }
 ]
})

动态路由就是拿来搞用户详情页面比如 User.vue这种的。一般的，这玩意儿就是靠路径参数，你看，像那个id就经常出场。所以，我们得学会从路径参数中得到信息，搞个清单出来，再利用这个清单来搞定实际的组件展示。最后，根据所在的路径参数，只需要通过v-show就能使相应的组件显示出来。这样一来，不用担心参数跟哪个组件匹配不上了吧!

 
{{ user.name }}


 export default {
  name: 'User',
  props: ['id'],
  data() {
   return {data: {}};
  },
  watch: {
   id(id) {
    this.getUser(id);
   },
  },
  computed: {
   user() {
    return this.data[this.id] || {name: ''};
   },
  },
  methods: {
   getUser(id) {
    setTimeout(() => { // 假装异步
     this.data[id] = {id, name: '张' + id};
    }, 1000);
   },
  },
  mounted() {
   this.getUser(this.id);
  },
 };

我给你举个小例子。比如我们有个叫做Detail的组件，那么我们只要把它当作路由组件就能搞定了。

我们终于干了件大事儿——成功解耦了！想换路由组件？这可不是咱们随便搞搞就能做到滴，是真的模块在背后运作哟~还不信吗？来给你们瞅瞅图片就清楚了

这方法挺好学的，但也得注意几点。像是要记住每个参数页的垂直滚动条高度；然后，子页面怎么安全关闭也是个问题。不过别担心，网上《e-admin》这个应用里有个组件叫‘ea-view’，它能解决这些难题。快去看看，也许你会喜欢！

 

  
 


 import User from './User.vue';
 export default {
  name: 'UserPage',
  components: {
   User,
  },
  props: ['id'],
  data() {
   return {
    idList: [this.id],
   };
  },
  watch: {
   id(id) {
    if (!this.idList.includes(id)) this.idList.push(id);
   },
  },
 };

好了不多说了！希望能帮到你，给咱点赞别走了，留句话再撤呗！

{ path: '/user/:id', component: UserPage, props: true }