Vue中router两种传参方式

Z时代
2024-01-10
分类：综合

vue

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 >
    <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 >
    <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>