千峰商城-springboot项目搭建-48-router命名路由

 命名路由：在定义路由的时候可以给路由指定name，我们在进行路由导航时可以通过路由的名字导航。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/vue-router.js"></script>
    </head>
    <body>
        <div id="container">
            <input type="text" v-model="rname" />
            <router-link :to="{name:rname}">t1</router-link>            
            <button type="button" @click="test">按钮1</button>            
            <router-view></router-view>
        </div>        
        <script type="text/javascript">            
            const t1 = {
                template:`<div style="width:400px; height:200px; border:blue 1px solid">index</div>`
            };
            const t2 = {
                template:"<div style='width:400px; height:200px; border:red 1px solid'>t2</div>"
            };            
            const myrouter = new VueRouter({
                routes:[
                {
                    path:"/a",name:"r1",component:t1
                },{
                    path:"/b",name:"r2",component:t2
                }
                
            ]});
            var vm = new Vue({
                el:"#container",
                data:{
                    rname:"r1"
                },
                router:myrouter,
                methods:{
                    test:function(){                        
                        myrouter.push({name:vm.rname});
                    }                                        
                }
            });
        </script>
    </body>
</html>

 

 

 

 

 

 

 

 
 
posted @ 2022-07-12 16:57  临易  阅读(27)  评论(0)  编辑  收藏  举报