Vue路由传递参数与接受参数

路由（参数传递）

使用路径匹配的方式

• 修改路由配置

{
    path: '/xxx/xxx/:id',
    component: XXX
}

• 主要是在 path 属性中增加了 :id 这样的占位符，来接受路由参数

  • 例如 /xxx/xxx/66 ID={{$route.params.id}}

  • 源组件 => 源组件
    // 源组件
    <template>
    	<div>
            <!--写法1-->
            <router-link to="/xxx/xxx/666"></router-link>
            <!--写法2-->
            <router-link :to="{name: '组件Name', params: {id:2} }"></router-link>
            <div>
            	<router-view></router-view>    
        	</div>
        </div>
    </template>
    
    // 目标组件
    <template>
    	<div>
           	<!-- 使用route.params.id 来获取路由参数 -->
            ID={{$route.params.id}}
            <!-- 通过props接受路由参数,前提是在路由配置添加 props属性 -->
            ID={{id}}
        </div>
    </template>
    <script>
    	export default {
            // 通过props来接受路由参数占位，前提是在路由配置添加 props属性，props:true
            props: ['id']
        }
    </script>