Vue Router 实战-优快云博客

本文详细介绍 Vue Router 的基本用法及参数传递技巧，包括组件跳转、动态路由匹配、通过按钮和链接实现页面导航，以及如何从路由参数中获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vueRouter基本用法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
    <div id="example">
        {{msg}}
        <router-view></router-view>
    </div>
    <script>
        var TestStart = Vue.component('start',{
            template:"<div><h1>This is my start component</h1>" +
                    "<router-link to='/myMain'>跳转到main页面</router-link>" +
                    "<a href='#/myMain'>a标记跳转到main页面</a>" +
                    "<button @click='jump'>js实现跳转到main页面</button></div>",
            methods:{
                jump:function(){
                    myRouter.push('/myMain');
                }
            }
        });

        var TestMain = Vue.component("mains",{
            template:"<h1>This is the main component</h1>"
        });

        // 创建地址判断的对象数组
        const myRoutes=[
            {path:'/',component:TestStart},
            {path:'/myStart',component:TestStart},
            {path:'/myMain',component:TestMain}
        ];

        // 创建router实例
        // 常量
        const myRouter = new VueRouter({
            routes:myRoutes
        });
        new Vue({
            el:"#example",
            router:myRouter,
            data:{
                msg:"hello Vue"
            }
        });
    </script>
</body>
</html>

vueRouter传参

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<div id="example">
    {{msg}}
    <router-view></router-view>
</div>


<script type="text/x-template" id="detailTpl">
    <div>
        <h1>这是详情页面</h1>
        <router-link to="/myOrder/20">
            立即下单
        </router-link>
    </div>
</script>
<script type="text/x-template" id="orderTpl">
    <div>
        <h1>这是下单页面</h1>
        <p>{{"接收到的参数为:"+msg}}</p>
    </div>
</script>
<script>
    //创建各个组件
    var kflDetail = Vue.component('detail',{
        template:"#detailTpl"
    });
    var kflOrder = Vue.component("order",{
        template:"#orderTpl",
        data:function(){
            return{
                msg:''
            }
        },
        created:function(){
            this.msg = this.$route.params.id;
        }
    });

    //定义路由
    const myRoutes = [
        {path:'/myDetail',component:kflDetail},
        {path:'/myOrder/:id',component:kflOrder},
        {path:'/',component:kflDetail}
    ]

    //创建路由对象
    const myRouter = new VueRouter({
        routes:myRoutes
    });
    new Vue({
        el:"#example",
        data:{
            msg:'hello VueJs'
        },
        router:myRouter
    });

</script>
</body>
</html>

router传参2

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<div id="example">
    <router-view></router-view>
</div>

<script>
    var kflList = Vue.component('myList',{
        data:function(){
            return{
                dishList:['鱼香肉丝','炸酱面','烤鸭']
            }
        },
        methods:{
            jump:function(index){
                myRouter.push("/kflDetail/"+index);
            }
        },
        template:`
    <ul>
    <li v-for="(dish,index) in dishList">
            <button @click="()=>jump(index)">
    {{dish}}
    </button>
    <router-link v-bind:to="'/kflDetail/'+index">
            test
            </router-link>
    </li>
    </ul>
    `
    });
    var kflDetail = Vue.component('myDetail',{
        data:function(){
            return{
                msg:''
            }
        },
        created:function(){
            this.msg = this.$route.params.num;
        },
        template:`
    <p>{{"接收到的数据为:"+msg}}</p>
    `
    });
    const myRoutes = [
        {path:'/',component:kflList},
        {path:'/kflList',component:kflList},
        {path:'/kflDetail/:num',component:kflDetail}
    ]
    const myRouter = new VueRouter({
        routes:myRoutes
    });
    new Vue({
        el:"#example",
        router:myRouter
    });

</script>
</body>
</html>

vueResource

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script src="vue-resource.js"></script>
</head>
<body>
    <div id="example">
        <my-film></my-film>
     </div>
<script>
    Vue.component("my-film",{
        data:function(){
            return{
                myList:[]
            }
        },
        mounted:function(){
            this.$http.get("test.json").then(function(response){
                this.myList = response.data;
            })
        },
        template:`
            <ul>
                <li v-for="tmp in myList">
                  {{tmp.name}}
                </li>
            </ul>
        `
    });

    new Vue({
        el:"#example"
    });

</script>
</body>
</html>