Vue入门十三、路由的传参和取参-web开发-互联网-天达云

Vue入门十三、路由的传参和取参
更新：HHH 时间：2023-1-7

1、查询参login?id=12345

配置：（传参）:to="{name:'login', query:{id:'loginid'}}"
获取：（取参）this.$route.query.id

2、路由参数

配置：（传参）:to="{name:'login', params:{id:'loginid'}}"
获取：（取参）this.$route.params.id

3、路径参数register/registerid/info

配置：（传参）:to="{name:'register', params:{id:'registerid'}}"
配置路由规则：
routes: [{path: '/register/:id/info', name: 'register', component: Register}]
获取：（取参）this.$route.params.id

4、使用props直接取参

配置：（传参）:to="{name:'propsParams', params:{id:'propsParamsId'}}"
配置路由规则：
routes: [
// 通过props传值
{path: '/propsParams', name: 'propsParams', props: true, component: PropsParams}]
获取：（取参）

 var PropsParams = {
        template: `
                <div>传参直接取值
                <br>
                    直接拿到ID:{{id}}
                </div>
            `,
        // 直接通过props取参
        props: ['id']
    }

5、通过JS进行传参

this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})

代码示例：

query传参：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var Login = {
        template: `
                <div>登陆了
                    <br>
                    登陆ID:{{msg}}
                </div>
            `,
        data() {
            return {
                msg: ''
            }
        },
        created() {
            this.msg = this.$route.query.id
        }
    }

    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter({
        // 配置路由对象
        routes: [{path: '/login', name: 'login', component: Login}
        ]
    })
    new Vue({
            el: '#app',
            router,
            template: `
            <div>
                <router-link :to="{name:'login', query:{id:'loginid'}}">query传参</router-link>
                <router-view></router-view>
</div>
        `
        }
    )
</script>
</body>
</html>

params传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var Register = {
        template: `
                <div>注册了
                 <br>
                    注册ID:{{msg}}
                </div>
            `,
        data() {
            return {
                msg: ''
            }
        },
        created() {
            this.msg = this.$route.params.id
        }
    }
    var PathParams = {
        template: `
                <div>路径传参
                 <br>
                    路径ID:{{pat}}
                </div>
            `,
        data() {
            return {
                pat: ''
            }
        },
        created() {
            this.pat = this.$route.params.id
        }
    }
    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter({
        // 配置路由对象
        routes: [
            {path: '/register', name: 'register', component: Register}
        ]
    })
    new Vue({
            el: '#app',
            router,
            template: `
            <div>
                <router-link :to="{name:'register', params:{id:'registerid'}}">params传参</router-link>
                <router-view></router-view>
</div>
        `
        }
    )
</script>

</body>
</html>

params路径传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var Register = {
        template: `
                <div>注册了
                 <br>
                    注册ID:{{msg}}
                </div>
            `,
        data() {
            return {
                msg: ''
            }
        },
        created() {
            this.msg = this.$route.params.id
        }
    }
    var PathParams = {
        template: `
                <div>路径传参
                 <br>
                    路径ID:{{pat}}
                </div>
            `,
        data() {
            return {
                pat: ''
            }
        },
        created() {
            this.pat = this.$route.params.id
        }
    }
    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter({
        // 配置路由对象
        routes: [
            {path: '/register/:id/info', name: 'register', component: Register}
        ]
    })
    new Vue({
            el: '#app',
            router,
            template: `
            <div>
                <router-link :to="{name:'register', params:{id:'registerid'}}">path传参</router-link>
                <router-view></router-view>
</div>
        `
        }
    )
</script>

</body>
</html>

params使用props直接取参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var PropsParams = {
        template: `
                <div>传参直接取值
                <br>
                    直接拿到ID:{{id}}
                </div>
            `,
        // 直接通过props取参
        props: ['id']
    }
    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter({
        // 配置路由对象
        routes: [
            // 通过props传值
            {path: '/propsParams', name: 'propsParams', props: true, component: PropsParams}
        ]
    })
    new Vue({
            el: '#app',
            router,
            template: `
            <div>
                <router-link :to="{name:'propsParams', params:{id:'propsParamsId'}}">传参直接取值</router-link>
                <router-view></router-view>
</div>
        `
        }
    )
</script>

</body>
</html>

js传参

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter()
    // 创建路由对象
    new Vue({
            el: '#app',
            router,
            template: `
            <div>
                <button @click="goLogin">JS跳转登录页面</button>
</div>
        `,
            methods: {
                goLogin() {
                    // 使用js路由跳转貌似只能使用query传参
                    this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})
                }
            }
        }
    )
</script>

</body>
</html>

fullPath路由全路径监听

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var Login = {
        template: `
                <div>登陆了
                    <br>
                    登陆ID:{{msg}}
                </div>
            `,
        data() {
            return {
                msg: ''
            }
        },
        created() {
            this.msg = this.$route.query.id
        }
    }

    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter({
        // 配置路由对象
        routes: [
            {path: '/login', name: 'login', component: Login}
        ]
    })
    new Vue({
            el: '#app',
            router,
            template: `
            <div>
                <router-link :to="{name:'login', query:{id:'loginid'}}">query传参</router-link>
                <button @click="goLogin">js跳转</button>
                // js跳转和标签跳转同一页面,路由相同而参数不同页面ID不刷新问题
                // 使用全路径监听fullPath
                <router-view :key="$route.fullPath"></router-view>
</div>
        `,
            methods: {
                goLogin() {
                    this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})
                }
            }
        }
    )
</script>

</body>
</html>

完整代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.js"></script>
<script type="text/javascript">
    var Login = {
        template: `
                <div>登陆了
                    <br>
                    登陆ID:{{msg}}
                </div>
            `,
        data() {
            return {
                msg: ''
            }
        },
        created() {
            this.msg = this.$route.query.id
        }
    }
    var Register = {
        template: `
                <div>注册了
                 <br>
                    注册ID:{{msg}}
                </div>
            `,
        data() {
            return {
                msg: ''
            }
        },
        created() {
            this.msg = this.$route.params.id
        }
    }
    var PathParams = {
        template: `
                <div>路径传参
                 <br>
                    路径ID:{{pat}}
                </div>
            `,
        data() {
            return {
                pat: ''
            }
        },
        created() {
            this.pat = this.$route.params.id
        }
    }
    var PropsParams = {
        template: `
                <div>传参直接取值
                <br>
                    直接拿到ID:{{id}}
                </div>
            `,
        props: ['id']
    }
    // 安装插件
    Vue.use(VueRouter);
    // 创建路由对象
    var router = new VueRouter({
        // 配置路由对象
        routes: [{path: '/login', name: 'login', component: Login},
            {path: '/register', name: 'register', component: Register},
            // 路径传参
            {path: '/pathParams/:id/info', name: 'pathParams', component: PathParams},
            // 直接取
            {path: '/propsParams', name: 'propsParams', props: true, component: PropsParams}
        ]
    })
    new Vue({
            el: '#app',
            router,
            template: `
            <div>
                <router-link :to="{name:'login', query:{id:'loginid'}}">query传参</router-link>
                <router-link :to="{name:'register', params:{id:'registerid'}}">params传参</router-link>
                <router-link :to="{name:'pathParams', params:{id:'123456'}}">path传参</router-link>
                <router-link :to="{name:'propsParams', params:{id:'propsParamsId'}}">传参直接取值</router-link>
                <button @click="goLogin">JS跳转登录页面</button>
                <router-view :key="$route.fullPath"></router-view>
</div>
        `,
            methods: {
                goLogin() {
                    this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})
                }
            }
        }
    )
</script>

</body>
</html>


返回web开发教程...

1、查询参login?id=12345

2、路由参数

3、路径参数register/registerid/info

4、使用props直接取参

5、通过JS进行传参

代码示例：

新手上路

产品管理

支付方式

关于我们