vue动态路由,和vue动态路由传值方式 - 前端笔记-1.动态路由 ,可以在路由模块创建很多 ,但是都用一个组件 !--引入js文件-- &nb...

学习笔记

点滴记忆
回忆过往
首页>> >>vue动态路由,和vue动态路由传值方式 - 前端笔记

1.动态路由   ,可以在路由模块 创建很多 ,但是都用一个组件
 <!-- 引入js文件 -->
    <script type='text/javascript' src='js/vue.js'></script>
    <script src="./js/vue-router_3.0.2.js"></script>

    <div id='app'>

        <!-- //路由模块 -->
        <router-link to="/login/id=1">登录入口1</router-link>
        <router-link to="/login/id=2">登录入口2</router-link>
        <router-link to="/login/id=3">登录入口3</router-link>
        <router-link to="/zc/1">zc1</router-link>

        <!-- //路由填坑 -->
        <router-view></router-view>

    </div>
    <script type='text/javascript'>
        //自定义组件
        var login = {
            template: `<div>我是login{{$route.params.id}}</div>`
        };
        var zc = {
            template: `<div>我是zc</div>`
        };

        //创建路由实例和设置路由情况
        var router = new VueRouter({
            routes: [{
                path: '/login/:id',
                component: login
            }, {
                path: '/zc/:id',
                component: zc
            }]
        });

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            router
        });
    </script>

vue路由动态传值,

1.通过 props  接收  id 传值
        //创建路由实例和设置路由情况
        var router = new VueRouter({
            routes: [{
                path: '/login/:id',
                component: login,
                props: true
            }, {
                path: '/zc/:id',
                component: zc
            }]
        });

2.通过设置 路由实例 上的props 发送 对象 数据,在接收数据方通过 props接收数据(却点不能传id)
        //创建路由实例和设置路由情况
        var router = new VueRouter({
            routes: [{
                path: '/login/:id',
                component: login,
                props: {
                    username: '张三',
                    pwd: 123
                }
            }, {
                path: '/zc/:id',
                component: zc
            }]
        });



3.通过设置 路由实例上的 props 发送 函数数据  ,在接收一方通过props接收

        //创建路由实例和设置路由情况
        var router = new VueRouter({
            routes: [{
                path: '/login/:id',
                component: login,
                props: () => {
                    return {
                        id: id,
                        name: '张三',
                        pwd: 123
                    }
                }
            }, {
                path: '/zc/:id',
                component: zc
            }]
        });


        //创建路由实例和设置路由情况
        var router = new VueRouter({
            routes: [{
                path: '/login/:id',
                component: login,
                props: () => {
                    ({
                        id: id,
                        name: '张三',
                        pwd: 123
                    })
                }
            }, {
                path: '/zc/:id',
                component: zc
            }]
        });


×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » vue动态路由,和vue动态路由传值方式
版权所有:《前端笔记
文章标题:《vue动态路由,和vue动态路由传值方式
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-44.html

网友评论(0)