内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

Vue入門(mén)十三、路由的傳參和取參

1、查詢參login?id=12345

配置：（傳參）:to="{name:'login', query:{id:'loginid'}}"
獲?。海ㄈⅲ﹖his.$route.query.id

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、愛(ài)民ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的愛(ài)民網(wǎng)站制作公司

2、路由參數(shù)

配置：（傳參）:to="{name:'login', params:{id:'loginid'}}"
獲?。海ㄈⅲ﹖his.$route.params.id

3、路徑參數(shù)register/registerid/info

配置：（傳參）:to="{name:'register', params:{id:'registerid'}}"
配置路由規(guī)則：
routes: [{path: '/register/:id/info', name: 'register', component: Register}]
獲?。海ㄈⅲ﹖his.$route.params.id

4、使用props直接取參

配置：（傳參）:to="{name:'propsParams', params:{id:'propsParamsId'}}"
配置路由規(guī)則：
routes: [
// 通過(guò)props傳值
{path: '/propsParams', name: 'propsParams', props: true, component: PropsParams}]
獲?。海ㄈⅲ?/p>

 var PropsParams = {
        template: `
                <div>傳參直接取值
                <br>
                    直接拿到ID:{{id}}
                </div>
            `,
        // 直接通過(guò)props取參
        props: ['id']
    }
5、通過(guò)JS進(jìn)行傳參

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);
    // 創(chuàng)建路由對(duì)象
    var router = new VueRouter({
        // 配置路由對(duì)象
        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>注冊(cè)了
                 <br>
                    注冊(cè)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);
    // 創(chuàng)建路由對(duì)象
    var router = new VueRouter({
        // 配置路由對(duì)象
        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>注冊(cè)了
                 <br>
                    注冊(cè)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);
    // 創(chuàng)建路由對(duì)象
    var router = new VueRouter({
        // 配置路由對(duì)象
        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>
            `,
        // 直接通過(guò)props取參
        props: ['id']
    }
    // 安裝插件
    Vue.use(VueRouter);
    // 創(chuàng)建路由對(duì)象
    var router = new VueRouter({
        // 配置路由對(duì)象
        routes: [
            // 通過(guò)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);
    // 創(chuàng)建路由對(duì)象
    var router = new VueRouter()
    // 創(chuàng)建路由對(duì)象
    new Vue({
            el: '#app',
            router,
            template: `
            <div>
                <button @click="goLogin">JS跳轉(zhuǎn)登錄頁(yè)面</button>
</div>
        `,
            methods: {
                goLogin() {
                    // 使用js路由跳轉(zhuǎn)貌似只能使用query傳參
                    this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})
                }
            }
        }
    )
</script>

</body>
</html>

fullPath路由全路徑監(jiān)聽(tīng)

<!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);
    // 創(chuàng)建路由對(duì)象
    var router = new VueRouter({
        // 配置路由對(duì)象
        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跳轉(zhuǎn)</button>
                // js跳轉(zhuǎn)和標(biāo)簽跳轉(zhuǎn)同一頁(yè)面,路由相同而參數(shù)不同頁(yè)面ID不刷新問(wèn)題
                // 使用全路徑監(jiān)聽(tīng)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>注冊(cè)了
                 <br>
                    注冊(cè)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);
    // 創(chuàng)建路由對(duì)象
    var router = new VueRouter({
        // 配置路由對(duì)象
        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跳轉(zhuǎn)登錄頁(yè)面</button>
                <router-view :key="$route.fullPath"></router-view>
</div>
        `,
            methods: {
                goLogin() {
                    this.$router.push({path: '/login', name: 'login', query: {id: 'loginidjs'}})
                }
            }
        }
    )
</script>

</body>
</html>

當(dāng)前標(biāo)題：Vue入門(mén)十三、路由的傳參和取參
標(biāo)題鏈接：http://www.rwnh.cn/article26/pgcejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、ChatGPT、Google、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司
大英县| 普定县| 竹山县| 上饶县| 鸡西市| 惠来县| 南通市| 涿鹿县| 潮安县| 兴化市| 武威市| 大英县| 含山县| 莲花县| 安化县| 东乡| 池州市| 资溪县| 宿州市| 宝坻区| 海宁市| 宜君县| 伊金霍洛旗| 桐城市| 延庆县| 兰西县| 昔阳县| 周口市| 独山县| 高雄市| 扶余县| 丹阳市| 兴和县| 德庆县| 安丘市| 华阴市| 大石桥市| 青冈县| 扎鲁特旗| 弋阳县| 泽普县|