vue-router从入门到精通之动态路由（三）

最新推荐文章于 2024-04-20 08:26:00 发布

原创最新推荐文章于 2024-04-20 08:26:00 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-router #vue

vue-router 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Vue.js中动态路由的使用方法，包括如何定义带有参数的路由路径、如何在组件中获取这些参数以及如何监听路由参数的变化。文章还讨论了在复用组件时如何响应路由参数的变化。

这一节，我们讲讲动态路由是如何使用的，动态路由我们也可以理解为路由传参，这样就容易理解了吧

let router = new VueRouter({
  mode: 'history',
  linkActiveClass: 'is-active',
  routes: [{
    path: '/home/:id',
    component: home
  }]
})

这里，上述形式即为动态路由，冒号后面的就是参数，参数可以跟多个。

let router = new VueRouter({
  mode: 'history',
  linkActiveClass: 'is-active',
  routes: [{
    path: '/home/:id/:name',
    component: home
  }]
})

当匹配到一个路由时，参数值会被设置到this.$route.params中，可以在每个组件内使用。得到传入的参数，我们可以在对应的组件中通过$route.params.id来获取，你也可以获取$route.params来看看传过来了什么

<template>
  <div>id为{{ $route.params.id }}</div>
</template>

<script>
export default {
  data () {
    return {}
  },

  methods: {}
}

当使用路由参数时，例如，从/home/1导航到/home/2时，原来的组件实例会被复用。因为两个路由都渲染同个组件，复用比销毁再创建更加高效。这也就导致了组件的生命周期钩子不会再被调用

复用组件时，相对路由参数的变化作出响应的话，可以简单的watch(监测变化)$route对象

export default {
  data () {
    return {
      id: this.$route.params.id
    }
  },
  watch: {
    '$route' (to, from) {
      console.log(to)
      console.log(from)
    }
  }
}