Vue中router两种传参方式

1.Vue中router使用query传参

相关Html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/vue-2.4.0.js"></script>

    <script src="../js/vue-resource-1.3.4.js"></script>

    <!--1.引入vue-router-->

    <script src="../lib/vue-router-3.0.1.js"></script>

    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <style>

        .myactive {

            color: red;

            font-size: 20px;

        }

        .v-enter,

        .v-leave-to {

            opacity: 0;

            transform: translateX(140px);

        }

        .v-enter-active,

        .v-leave-active {

            transition: all 0.5s ease;

        }

    </style>

</head>

<body>

<div id="app">

    <router-link to="/login?id=10&name='zhangsan'">登录</router-link>

    <router-link to="/register">注册</router-link>

    <!--router-view,提供的用来当做占位符的 router中的规则会展现到这个里面去-->

    <transition mode="out-in">

        <router-view></router-view>

    </transition>

</div>

<script>

    var login = {

        template: '<h1>这个是登录组件--- {{$route.query.id}}----{{$route.query.name}} </h1>',

        data:function () {

            return {

                 msg:'123'

            }

        },

        created:function () {

            console.log(this.$route);

        }

    }

    var register = {

        template: '<h1>注册组件</h1>'

    }

    //在new

    var routerObj = new VueRouter({

        //这个配置对象中的route表示路由匹配规则的意思

        //1.path,表示监听,路由的连接地址

        //2.component 表示路由匹配到的path

        routes: [

            //注意:component属性值,必须是一个组件模板对象,不能是引用名称

            {path: '/', redirect: '/login'},

            {path: '/login', component: login},

            {path: '/register', component: register}

        ],

        linkActiveClass: 'myactive'

    })

    var vm = new Vue({

        el: "#app",

        data: {},

        methods: {},

        router: routerObj //将路由规则对象,注册到vm实例上,用来监听地址对象

    })

</script>

</body>

</html>

2Vue中router使用params传参

相关Html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../js/vue-2.4.0.js"></script>

    <script src="../js/vue-resource-1.3.4.js"></script>

    <!--1.引入vue-router-->

    <script src="../lib/vue-router-3.0.1.js"></script>

    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <style>

        .myactive {

            color: red;

            font-size: 20px;

        }

        .v-enter,

        .v-leave-to {

            opacity: 0;

            transform: translateX(140px);

        }

        .v-enter-active,

        .v-leave-active {

            transition: all 0.5s ease;

        }

    </style>

</head>

<body>

<div id="app">

    <router-link to="/login/10">登录</router-link>

    <router-link to="/register">注册</router-link>

    <transition mode="out-in">

        <router-view></router-view>

    </transition>

</div>

<script>

    var login = {

        template: '<h1>这个是登录组件--- {{$route.params.id}} </h1>',

        data:function () {

            return {

                msg:'123'

            }

        },

        created:function () {

            console.log(this.$route.params);

        }

    }

    var register = {

        template: '<h1>注册组件</h1>'

    }

    var routerObj = new VueRouter({

        routes: [

            {path: '/login/:id', component: login},

            {path: '/register', component: register}

        ],

        linkActiveClass: 'myactive'

    })

    var vm = new Vue({

        el: "#app",

        data: {},

        methods: {},

        router: routerObj //将路由规则对象,注册到vm实例上,用来监听地址对象

    })

</script>

</body>

</html>

Vue中router两种传参方式的更多相关文章

  1. vue param和query两种传参方式

    1.传参方式 query传参方式 this.$router.push({ path: "/home", query: {code:"123"} }) param ...

  2. vue的param和query两种传参方式及URL的显示

    路由配置: // 首页 { path: '/home', name:'home', component:Home }, // 行情 { path: '/markets', name:'market', ...

  3. 四：flask-URL两种传参方式（路径传参和get传参）

    新建一个视图 第一种:路径传参:url/参数:<参数名>,然后再视图函数中接收参数 也可以指定数据类型 string:默认使用此数据类型,接收没有任何斜杠"\/"的文本 ...

  4. SpringBoot——两种传参方式

    ?传参 举例:http://localhost:8082/news/asset/getDatas?page=1&keyWord=123&year=2020 注解:@RequestPar ...

  5. SpringMVC Ajax两种传参方式

    1.采用@RequestParam或Request对象获取参数的方法 注:contentType必须指定为:application/x-www-form-urlencoded @ResponseBod ...

  6. MyBatis两种传参方式的区别

    $与#的区别 select * from T_PRINT_LAYOUT where D_RECID = ${recId} 最后生成的SQL为: select * from T_PRINT_LAYOUT ...

  7. python 计算机发展史,线程Process使用 for循环创建 2种传参方式 jion方法 __main__的解释

    ########################总结################## #一 操作系统的作用: 1:隐藏丑陋复杂的硬件接口,提供良好的抽象接口 2:管理.调度进程,并且将多个进程对硬 ...

  8. Mybatis的几种传参方式，你了解吗？

    持续原创输出,点击上方蓝字关注我 目录 前言 单个参数 多个参数 使用索引[不推荐] 使用@Param 使用Map POJO[推荐] List传参 数组传参 总结 前言 前几天恰好面试一个应届生,问了 ...

  9. 浅谈C++三种传参方式

    浅谈C++三种传参方式 C++给函数传参中,主要有三种方式:分别是值传递.指针传递和引用传递. 下面通过讲解和实例来说明三种方式的区别. 值传递 我们都知道,在函数定义括号中的参数是形参,是给函数内专 ...

随机推荐

  1. ansible-playbook 主机变量2

    ansible-playbook 配置 hosts 后可以指定变量,通过-k 可以交互输入密码,也可以将密码写在 hosts 文件中. 入口 yaml 文件中通过 {{ ** }} 获取变量,命令行通 ...

  2. Google Map API申请

    https://code.google.com/apis/console 当然需要先有个Google账户登录. 然后需要建一个项目. 然后根据package+sha1码获取密钥key 然后就可以创建凭 ...

  3. springMVC 开涛 数据绑定

    纸上得来终觉浅,绝知此事要躬行. 一.@requestParam //使用方法URL:?username="sfp" test(@RequestParam(value=" ...

  4. 4张图看懂delphi 10生成ipa和在iPhone虚拟器上调试(教程)

    4张图看懂delphi 10生成ipa和在iPhone虚拟器上调试(教程) (2016-02-01 03:21:06) 转载▼ 标签: delphi ios delphi10 教程 编程 分类: 编程 ...

  5. Nodejs书写爬虫工具

    看了几天的nodejs,的确是好用,全当是练手了,就写了一个爬虫工具. 爬虫思路都是一致的,先抓取页面数据,然后分析页面,获取到所需要的数据,最后获得这些数据,是写入到硬盘,还是显示到网页,自己看着办 ...

  6. PLSQL(PL/SQL)集成Team Foundation Server (TFS)，实现数据库代码的版本管理

    PL/SQL是面向Oralcle数据库的集成开发环境,是众多Oracle数据库开发人员的主要工具.由于PL/SQL(百度百科)不仅是一种SQL语言,更是一种过程编程语言,在项目实施过程中,会积累大量除 ...

  7. 使用redis实现【统计文章阅读量】及【最热文章】功能

    1.视图函数 # 不需要登录装饰器,匿名用户也可访问def article_detail(request, id, slug): # print(slug,id) article = get_obje ...

  8. npm安装和Vue运行

    一.开始: 下载地址:http://nodejs.cn/download/ 下载安装: 直到 二.打开CMD,检查是否正常 在安装目录里新增两个文件夹 然后运行命令:如下图: npm config s ...

  9. RTOS双向链表数据结构

    在学习RTOS操作系统时,在任务优先级设置时用到了双向链表,说实话数据结构的东西只是停留在大学上课阶段,并未实践过,在操作系统中看得云里雾里,遂将其单独拿来了进行了一下思考,经过一个上午的摸索逐渐领会 ...

  10. C#扩展一个现有的类

    做个记录,写个示例 using System; class Rubbish { public void Say() { Console.Write("Hello"); } } st ...