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. UVa 11210 Chinese Mahjong （暴力，递归寻找）

    题意:这个题意.有点麻烦,就是说给定13张牌,让你求能“听”的牌.(具体的见原题) 原题链接: https://uva.onlinejudge.org/index.php?option=com_onl ...

  2. POJ3045 Cow Acrobats 2017-05-11 18:06 31人阅读 评论(0) 收藏

    Cow Acrobats Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4998   Accepted: 1892 Desc ...

  3. java细节问题

    保留两位小数:1.234, 1.23, 1.2, 1.0, 1. package test; import java.math.BigDecimal; import java.text.Decimal ...

  4. 【C++】C++中的虚函数与纯虚函数

    C++中的虚函数 先来看一下实际的场景,就很容易明白为什么要引入虚函数的概念.假设我们有一个基类Base,Base中有一个方法eat:有一个派生类Derived从基类继承来,并且覆盖(Override ...

  5. MVC-1.1 BundleConfig-ScriptBundle

    App_Start中的BudleCnfig.cs中 bundles.Add(new ScriptBundle("~/bundles/jquery").Include( " ...

  6. Get User CustomNotificationAddresses

    select pv.StringValue, * from tbl_Identity    i left join tbl_PropertyValue pv on pv.ArtifactId=conv ...

  7. ASP.Net Core 2.2 MVC入门到基本使用系列 (四)

    本教程会对基本的.Net Core 进行一个大概的且不会太深入的讲解, 在您看完本系列之后, 能基本甚至熟练的使用.Net Core进行Web开发, 感受到.Net Core的魅力. 本教程知识点大体 ...

  8. 简单了解 iTextSharp实现HTML to PDF

    查了下 转PDF的各种框架   发现大部分都是收费的. 发现一款免费的iTextSharp  就想玩一下 只是简单做个HTML 转PDF  没有过深的探究. 首先 我在项目中引入iTextSharp  ...

  9. win 10 mysql8.0安装

    1.解压缩安装包(记住自己的解压到那个目录,后面需要) 2.找到此电脑,然后找到属性(小编这里win10) 3.点击左侧高级系统设置 4.选择下面的环境变量 5.选择下面的新建,然后看图片,上面输入M ...

  10. Regular进阶： 跨组件通信

    本文由作者郑海波授权网易云社区发布. 背景 在组件化不断深入的大环境下,无论使用哪种 MDV 框架都最终会遇到一个头疼的问题,就是「跨组件通信」. 下图是个简单的例子 这里包含「事件通信」和「数据通信 ...