标签：Vue xxx ID 参数 props 组件 id 路由

路由（参数传递）

使用路径匹配的方式

• 修改路由配置

{
    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>
    
    

标签：Vue,xxx,ID,参数,props,组件,id,路由
来源： https://www.cnblogs.com/bingquan1/p/16614236.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。