Vue3.0 - 路由参数的获取

前言

记录下vue3.0中路由参数的获取

---

具体实现

• route.js

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    component: Detail
  }
]

• App.vue

<template>
  <div>
    <router-view @route-change="onRouteChange"/>
  </div>
</template>

<script>
import router from '@/router'

export default {
  name: 'App',
  methods: {
    /**
     * 自定义事件监听
     * @param event
     */
    onRouteChange (event) {
      router.push('/detail/3')
    }
  }
}
</script>

• home.vue

<template>
  <div>首页</div>
  <img @click="toDetail" src="@/assets/logo.png" style="width: 100%;"/>
</template>

<script>
export default {
  name: 'home',
  // 定义抛出的事件名称
  emits: ['route-change'],
  methods: {
    toDetail (event) {
      // 自定义事件抛出
      this.$emit('route-change', event)
    }
  }
}
</script>

• detail.vue

<template>
  <div>详情页{{id}}</div>
</template>

<script>
import router from '@/router'
export default {
  name: 'detail',
  data () {
    return {
      id: ''
    }
  },
  created () {
    console.log(router.currentRoute.value.params)
    this.id = router.currentRoute.value.params.id
  }
}
</script>

- End - - 个人学习笔记 - - 仅供参考 -