Vue中router两种传参方式

最新推荐文章于 2022-05-11 08:23:39 发布

weixin_30882895

最新推荐文章于 2022-05-11 08:23:39 发布

阅读量112

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/charlypage/p/9911706.html

版权

Vue中router两种传参方式

1.Vue中router使用query传参

相关Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.4.0.js"></script>
    <script src="../js/vue-resource-1.3.4.js"></script>
    <!--1.引入vue-router-->
    <script src="../lib/vue-router-3.0.1.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <style>
        .myactive {
            color: red;
            font-size: 20px;
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(140px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.5s ease;

        }


    </style>
</head>
<body>
<div id="app">

    <router-link to="/login?id=10&name='zhangsan'">登录</router-link>
    <router-link to="/register">注册</router-link>

    <!--router-view,提供的用来当做占位符的 router中的规则会展现到这个里面去-->
    <transition mode="out-in">
        <router-view></router-view>
    </transition>
</div>

<script>
    var login = {
        template: '<h1>这个是登录组件--- {{$route.query.id}}----{{$route.query.name}} </h1>',
        data:function () {
            return {
                 msg:'123'
            }
        },
        created:function () {
            console.log(this.$route);
        }
    }
    var register = {
        template: '<h1>注册组件</h1>'
    }

    //在new
    var routerObj = new VueRouter({
        //这个配置对象中的route表示路由匹配规则的意思
        //1.path,表示监听,路由的连接地址
        //2.component 表示路由匹配到的path
        routes: [
            //注意:component属性值,必须是一个组件模板对象,不能是引用名称
            {path: '/', redirect: '/login'},
            {path: '/login', component: login},
            {path: '/register', component: register}
        ],
        linkActiveClass: 'myactive'
    })

    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router: routerObj //将路由规则对象,注册到vm实例上,用来监听地址对象

    })

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

2Vue中router使用params传参

相关Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue-2.4.0.js"></script>
    <script src="../js/vue-resource-1.3.4.js"></script>
    <!--1.引入vue-router-->
    <script src="../lib/vue-router-3.0.1.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <style>
        .myactive {
            color: red;
            font-size: 20px;
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(140px);
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 0.5s ease;

        }


    </style>
</head>
<body>
<div id="app">

    <router-link to="/login/10">登录</router-link>
    <router-link to="/register">注册</router-link>

    <transition mode="out-in">
        <router-view></router-view>
    </transition>
</div>

<script>
    var login = {
        template: '<h1>这个是登录组件--- {{$route.params.id}} </h1>',
        data:function () {
            return {
                msg:'123'
            }
        },
        created:function () {
            console.log(this.$route.params);
        }
    }
    var register = {
        template: '<h1>注册组件</h1>'
    }

    var routerObj = new VueRouter({
        routes: [
            {path: '/login/:id', component: login},
            {path: '/register', component: register}
        ],
        linkActiveClass: 'myactive'
    })

    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router: routerObj //将路由规则对象,注册到vm实例上,用来监听地址对象

    })

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

转载于:https://www.cnblogs.com/charlypage/p/9911706.html