Vue---router--项目组件传参数

最新推荐文章于 2023-02-28 15:06:07 发布

郭浩326

最新推荐文章于 2023-02-28 15:06:07 发布

阅读量624

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/guohao326/article/details/72832679

版权

vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-router</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="js/vue.js" ></script>
    <!--- 第一步，将vue-router的源代码引入--->
    <script src="js/vue-router.js" ></script>
</head>
<body>

<div id="app">
    <div class="container">
        <ul class="nav nav-pills">
            <!--- 使用router-link 进行跳转 --->
            <li><router-link to="/index">首页</router-link></li>
            <li><router-link to="/books">图书列表</router-link></li>
            <li><router-link to="/games">游戏列表</router-link></li>
            <li><router-link to="/i">首页</router-link></li>
            <li><a href="javascript:;"><span @click="goWhere()">传参数游戏列表</span></a></li>
        </ul>

        <div>
            <!--- 使用router-view 进行显示 --->
            <router-view></router-view>

            <router-view name="a"></router-view>

            <router-view name="b"></router-view>
        </div>
    </div>
</div>
<script>

    var router = new VueRouter({
        routes:[
            {
                path : "/index",
                alias : "/i",
                components : {
                    default : {
                        template : "<h1>首页</h1>"
                    },
                    a : {
                        template : "<h1>这个是a视图的页面</h1>"
                    },
                    b : {
                        template : "<h1>这个是b视图的页面</h1>"
                    }

                }
            },
            {
                path:"/books",
                alias:"/b",
                component:{
                    template:"<h2>我是图示列表</h2>"
                }
            },
            {
                path:"/games/:username" ,
                name:"game",
                component:{
                    template:"<h2>游戏列表{{$route.params.username}}</h2>"
                }
            },
            {
                path : "*",//页面不能匹配过后跳转到
                redirect : "/index"
            }

        ]
    });
    new Vue({
        data : {
            username : "刘德华"
        },
        router : router,
        methods : {
            goWhere: function () {
//                    this.$router.go(-1);  //返回上一个
//                router.go(-1);            //返回上一个
//                router.push({path : '/games'});
                router.push({name : 'game',params:{username : this.username} });
            }
        }
    }).$mount("#app");
</script>
</body>
</html>

郭浩326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue---router--项目组件传参数

html>html lang="en">head> meta charset="UTF-8"> title>vue-routertitle> link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css"> script src="js/vue.j
复制链接

扫一扫