Vue路由机制--路由传参 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue路由机制--路由传参</title>

    </head>

    <body>
        <div id="app">
            <!-- 场景: 如：商品详情。文章详情。
            <router-link to="/shops/1">商品详情</router-link>
            <router-link to="/shops/2">商品详情</router-link>
            <router-link to="/shops/3">商品详情</router-link> -->
            
             <router-link to="/user/1">User1</router-link>
             <router-link to="/user/2">User2</router-link>
             <router-link to="/user/3">User3</router-link>
             <router-link to="/user/4">User4</router-link>
             
              <router-view></router-view>
        </div>
        
        
    </body>
    <!-- 1.引入相关文件 -->
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/vue-router.js"></script>
    
    <script type="text/javascript">    
       
      /* 
      方式1
      const User={
          template:'<h1>User组件--用户ID:{{$route.params.uid}}</h1>'
       } */
       
       //接收参数方式2[开发中使用这种]
       //通过{path:'/user/:uid',component:User,props:true}获取参数
/*        const User={
          props:["uid"],
          template:'<h1>User组件--用户ID:{{uid}}</h1>'
       } */
       
       //对象接收
       const User={
          props:["uid","uname"],
          template:'<h1>User组件--用户ID:{{uid}},姓名:{{uname}}</h1>'
       }
     
     //5.配置路由规则并创建路由实例
     var router=new VueRouter({
         //所有的路由规则
         routes:[
             //props:true:表示为当前组件设置为组件传递参数
            //{path:'/user/:uid',component:User,props:true}
            //静态传参
            //{path:'/user/:uid',component:User,props:{uname:'王生'}}
            //动态传递参数
            {path:'/user/:uid',
            component:User,
            props:route=>({uname:'王生',uid:route.params.uid}),
            }
         ]
     })
       
       const vm=new Vue({
           el:'#app',
           router:router,//挂载路由实例对象
       })
       
    </script>
</html>

 

posted @ 2021-07-08 09:53  王彬-效率开发  阅读(55)  评论(0)    收藏  举报