Vue 路由 router-路由组件传参 （重点）

Vue 路由 router-路由组件传参 （重点）

为什么要用路由组件传参呢？

在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的URL上使用，限制了灵活性。通过props来解耦。

布尔模式：如果 props 被设置为 true，route.params 将会被设置为组件属性。

核心代码：

<script>
const position = {
    
            //布尔模式
             props:['id'],
             template:`
                 <div>position {
     {id}}</div>
            `
        }
  let router = new VueRouter({
    
            // mode:'hash',默认值
            routes:[
                 {
    
                     path:'/position/:id',
                     component:position,
                     props:true,//布尔模式
                 },
            ]
        })
</script>

对象模式：如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

核心代码：

<script>
	        const position = {
    
            //对象模式 props为静态时有用 应用面窄
            props:['id','username','age'],
            template:`
                <div>position-{
     {username}}-{
     {age}}-{
     {$route.params.id}}</div>
            `
        }
            let router = new VueRouter({
    
            // mode:'hash',默认值
            routes:[
                {
    
                    path:'/position/:id',
                    component:position,
                    props:{
    username:<