Vue路由机制--命名路由 

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

    </head>

    <body>
        <div id="app">
            <router-link :to="{name:'user',params:{uid:11,uname:'U1'}}">User1</router-link>
            <router-link :to="{name:'user',params:{uid:22,uname:'U2'}}">User2</router-link>
            <router-link :to="{name:'user',params:{uid:33,uname:'U3'}}">User3</router-link>
            <router-link :to="{name:'user',params:{uid:44,uname:'U4'}}">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">    
    
    const User={
       props:["uid","uname"],
       template:'<h1>User组件--用户ID:{{uid}},姓名:{{uname}}</h1>'
    }
    
     var router=new VueRouter({
         routes:[
             //为了更加方便的表示路由的路径.可以给路由规则起一个别名。
             /* 即为“命名路由” */
            {
                //命名路由
                name:'user',
                path:'/user/:uname',component:User,props:route=>({uname:route.params.uname,uid:route.params.uid}),
            }
         ]
     })
       
       const vm=new Vue({
           el:'#app',
           router:router,//挂载路由实例对象
       })
       
    </script>
</html>

 

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