Vue入门十三、路由的传参和取参

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>

原文地址：https://blog.51cto.com/12012821/2407154

时间： 2024-12-12 18:04:31

Vue入门十三、路由的传参和取参的相关文章

Vue.js 入门指南之“前传”（含sublime text 3 配置）

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境一开始看<基于Webpac

Vue.js 入门指南之“前传”

Vue入门系列（五）Vue实例详解与生命周期

[入门系列] [本文转自] http://www.cnblogs.com/fly_dragon Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.comp

Vue入门篇

一 ES6语法 1 ECMAScript 1995年,网景工程师Brendan Eich 花了10天时间设计了JavaScript语言. 1996年,微软发布了JScript,其实是JavaScript的逆向工程实现. 1997年,为了统一各种不同script脚本语言,ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了ECMAscript标准规范.JavaScript和JScript都是ECMAScript的标准实现者,随后各大浏览器厂商纷纷实现了ECMAScript标准.

Vue入门教程

Vue入门基础基础 TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误. Vue 很早就支持 TypeScript,但配置起来比较麻烦,幸好有了 Vue CLI 3.0.安装好 vue-cli 之后,使用 vue create 项目名称来创建项目,vue 脚本手架自动创建以项目名称命名的目录. vue-cli 3 生成的项目结构比较科学,尤其是通过 components 和 views 将作为控件的组件和作

Vue入门七、父子组件间通讯

一.父子组件通讯父传子:1.父用子的时候通过属性传递2.子要声明props:['属性名']接收3.子组件template中直接用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="

1.Vue入门基础

Vue学习 1.Vue简介 Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 中文网:https://vuejs.bootcss.com/ 2.如何使用Vue CDN链接对于制作原型或学习,你可以这样使用最新版本: <sc

Vue入门之Vuex实战

引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进行传递数据,而且数据传递是单向的.也就是说:父组件可以把数据传递给子组件,但是反之则不同.如下图所示: 单向数据流动单方向的数据流动带来了非常简洁和清晰的数据流,纯展示性或者独立性较强的模块的开发确实非常方便和省事. 但是复杂的页面逻辑,组件之间的数据共享处理就会需要通过事件总线的方式解决或者使用Vue的

华为AS中市内省内国内路由互传技术

实验环境: 实验: 1通过ISIS将AS内部的直连和会换口路由宣告 2.通过配置BGP协议将所有的用户业务路由宣告 3.通过配置路由反射器实现市内,省内业务路由互传 4.通过建立EBGP邻居实现全省和互联网路由互传 5.通过巧妙配置黑洞路由实现用户业务网段聚合 6.使用双协议方案实现IPv6网络平滑过度现网实战演练 7.模拟用户PPPOE拨号上网,完成模拟运营商网络 [AR1]isis 1 [AR1-isis-1]network-entity 490020.0010.0100.1001.00 [