vue-router无法利用url传递参数

Question

router/index.js

{

    path: '/orderdetail/:ordersid',
    component: OrderDetail
}

父组件

<router-link to="/orderdetail/198">
  <span class="orderSpan6">查看详情</span>
</router-link>
    

子组件

<template>
    <div>
        <p>{{ msg }}</p>
        <p>{{ $route.orderdetail.ordersid }}</p>
    </div>
</template>

<script>
export default {
    name:'orderdetail',
    data(){
        return {
            msg:"详情页面"
        }
    }
}
</script>

4.chrome报错

5.浏览器地址栏都可以正常显示

Answer 1

你把子组件里面取值代码改成这个 this.$route.params.ordersid

Answer 2

因为你写错了。<p>{{ $route.orderdetail.ordersid }}</p>改为<p>{{ $route.params.ordersid }}</p>