Vue 路由组件传参

最新推荐文章于 2023-08-09 22:14:57 发布

宝码哥

最新推荐文章于 2023-08-09 22:14:57 发布

阅读量94

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/m0_56733780/article/details/117565134

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./bower_components/vue/dist/vue.js"></script>
    <script src="./bower_components/vue-router/dist/vue-router.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/user/1">Boolean传参</router-link>
        <router-link to="/user1">对象传参</router-link>
        <router-link to="/user2/1">函数传参</router-link>
        <router-view></router-view>
    </div>
    <script>
        let routes = [
            {//Boolean传参
                path: '/user/:id',
                component: {
                    props: ['id'],
                    template: '<h1>id:{{id}}</h1>'
                },
                props: true //true把$route.params.id放到了组件的props里,false则相反。
            },
            {//对象传参
                path: '/user1',
                component: {
                    props: ['name'],
                    template: '<h1>{{name}}</h1>',
                },
                props: { name: 'Tom' }
            },
            {//函数传参
                path: '/user2/:id',
                component: {
                    props: ['id'],
                    template: '<h1>id:{{id}}</h1>'
                },
                props: router => {
                    return {
                        id: router.params.id
                    }
                }
            }
        ];
        let router = new VueRouter({
            routes
        })
        new Vue({
            router,
            el: '#app'
        })
    </script>
</body>

</html>

宝码哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 路由组件传参

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫