如何通过 Props 提取路由参数

Question

我正在学习 VueJs 并试图了解如何通过props提取route params 。

我正在查看以下文档，其中似乎有三个选项可以完成此操作，但到目前为止我还不能很好地理解它 - https://github.com/vuejs/vue-router/tree/dev/examples/route-props 。

我曾尝试将props: true添加到我的router对象数组（下面发布的 routes.js 文件），但也没有成功。

由于这是vue-cli研究项目，我将发布单独的相关代码块，以尝试正确说明这一点。

Main - App.vue 下面：

 <template>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <h1>Routing</h1>
                <hr>
                <app-header></app-header>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from './components/Header.vue'
    export default {
        components: {
            appHeader: Header
        }
    }
</script>

<style>
</style>

组件 - Header.vue 下面：

<template>
    <ul class="nav nav-pills">
        <router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>
        <router-link to="/user/10" tag="li" active-class="active"><a>User 1</a></router-link>
        <router-link to="/user/5" tag="li" active-class="active"><a>User 2</a></router-link>

    </ul>
</template>

组件 - User.vue 下面：

<template>
    <div>
        <h1>The User Page</h1>
        <hr>
        <br>
        <p>Route ID: {{id}}</p>
        <button class="btn btn-primary" @click="goHome">Go to Home</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                id: this.$route.params.id
            }
        },
        watch: {
          '$route'(to, from) {
              this.id = to.params.id;
          }
        },
        methods: {
            goHome(){
                this.$router.push('/')
            }
        }

    }

</script>

下面的 main.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import {routes} from "./routes";

Vue.use(VueRouter)

export const router = new VueRouter({
  routes,
  mode: 'history'
})

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

route.js 下面（位于 SRC 文件夹）：

import User from './components/user/User.vue'
import Home from './components/Home.vue'

export const routes = [
    {path: '', component: Home},
    {path: '/user/:id', component: User}
]

我是否还需要在User.vue组件中设置Props以使其工作并退出watch ？

换句话说，我希望看到我的用户路由在<p>Route ID: {{id}}</p>从这个硬编码的10到5使用这种我无法理解的新方法被监听，在顶部提到这个帖子。

任何人都可以在这种特定情况下引导我解决这个问题吗？

在此先感谢大家。

Answer 1

根据将 Props 传递给 Route components的文档，您可以使用路由器配置中的props选项将其解耦。

import User from './components/user/User.vue'
import Home from './components/Home.vue'

export const routes = [
    {path: '', component: Home},
    {path: '/user/:id', component: User, props: true}
]

<template>
  <div>
    <h1>The User Page</h1>
    <hr>
    <br>
    <p>Route ID: {{id}}</p>
    <button class="btn btn-primary" @click="goHome">Go to Home</button>
  </div>
</template>

<script>
  export default {
    props: ['id'],

    methods: {
      goHome() {
        this.$router.push('/')
      }
    }
  }
</script>