Vue使用routerLinke定义参数的时候  路由规则中不需要更改任何属性。

路由其实就是我们在html中定义的锚点，点击这个连接跳转一个锚点。vue中的路由也是这个原理，

前提是路由必须创建在实例之前。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

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

</head>

<body>

    <div class="app">

        <h1>{{msg}}</h1>

    <!-- 如果在路由中，使用 查询字符串，给路由传递参数，则 不需要修改 路由规则的 path 属性 -->

        <router-link to="log?user=duwei&pass=123456">登录</router-link>

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

        <router-view></router-view>

    </div>

<script>

    var log={

        template:'<h1>登录界面------{{$route.query.user}}</h1>',

        created() {

            // 组件的生命周期钩子函数

            // console.log(this.$route)

            // console.log(this.$route.query.id)

            // 这里的this指向的是vm实例对象

            console.log(this.$route.query.user);

        },

    }

    var zhuce={

        template:"<h1>注册界面</h1>"

    }

    var router= new VueRouter({

        routes:[

            {path:"/log",component:log},

            {path:"/zhuce",component:zhuce},

            {path:'/',redirect:'/zhuce'}   //当进入界面的时候，默认显示注册界面，redirect 是string类型的

        ],

    })

    var vm=new Vue({

        el:'.app',

        data:{

            msg:'sdfsdfsdf'

        },

        router:router

    })

</script>

</body>

</html>

路由规则中定义参数2

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

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

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

</head>

<body>

    <div class="app">

        <h1>{{msg}}</h1>

    <!-- 如果在路由中，参数传递值的时候，需要修改path中的属性值 -->

        <router-link to="/log/duwei/123456">登录</router-link>

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

        <router-view></router-view>

    </div>

<script>

    var log={

        template:'<h1>登录界面------{{$route.params.user}}----{{$route.params.id}}</h1>',

        created() {

            // 组件的生命周期钩子函数

            // console.log(this.$route)

            // console.log(this.$route.query.id)

            // 这里的this指向的是vm实例对象

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

        },

    }

    var zhuce={

        template:"<h1>注册界面</h1>"

    }

    var router= new VueRouter({

        routes:[

            // /:user和/:pass  相当与占位符

            {path:"/log/:user/:id",component:log},

            {path:"/zhuce",component:zhuce},

            {path:'/',redirect:'/zhuce'}   //当进入界面的时候，默认显示注册界面，redirect 是string类型的

        ],

    })

    var vm=new Vue({

        el:'.app',

        data:{

            msg:'sdfsdfsdf'

        },

        router:router

    })

Vue路由规则中定义参数的更多相关文章

  1. Vue 路由规则--传参数

    1,query方法去获取参数 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  2. vue路由跳转传参数

    1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data } ...

  3. vue路由监听和参数监听

    1.路由携带数据跳转 routerAction(hideDisplays, data) { switch (hideDisplays) { case "pubAccountMenu" ...

  4. snort规则中byte_test参数详解

    例子: byte_test:4,>,1000,20 这里是从本规则内前面匹配的位置结尾开始,向后偏移20个字节,再获取后面的4个字节的数据,与十进制数据1000进行比较,如果大于1000,就命中 ...

  5. Vue学习笔记【27】——Vue路由（设置路由）

    设置路由高亮 css:     .router-link-active, /* vue-router*/    .myactive {      color: red;      font-weigh ...

  6. Vue路由（vue-router）

    一.介绍 1.vue-router安装 官方文档:https://router.vuejs.org/zh/installation.html下载地址:https://unpkg.com/vue-rou ...

  7. MVC之路由规则 (自定义，约束，debug)

    自定义路由规则的要求,小范围写在前,大范围写在后.路由规则可以注册多条,路由规则的名称不能重复路由规则有顺序,并且按照顺序进行匹配,建议小范围写在前,大范围写在后.路由规则可以设置约束 即正则表达式路 ...

  8. VUE路由携带参数的三种方式

    vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...

  9. Vue路由参数

    vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...

随机推荐

  1. yii2 api接口 实现国际化多语言设置

    1) 在 /config/main.php 下添加如下代码: 'components' => [ 'language' => 'zh-CN', 'i18n' => [ 'transl ...

  2. 让Chrome浏览器抓包接口数据秒变 python 代码

    简介 uncurl是一个库,允许您将curl请求转换为使用requests 的python代码.由于Chrome网络检查器具有的“copy as cURL”,因此该工具对于用python重新创建浏览器 ...

  3. Nginx搭建负载均衡集群

    (1).实验环境 youxi1 192.168.5.101 负载均衡器 youxi2 192.168.5.102 主机1 youxi3 192.168.5.103 主机2 (2).Nginx负载均衡策 ...

  4. DevExpress v18.1 下载和教程文档

    http://www.zdfans.com/html/18682.html 教程文档 https://blog.csdn.net/AABBbaby/article/details/81094482 下 ...

  5. [转]Ubuntu 上创建常用磁盘阵列

    链接地址:https://www.jianshu.com/p/9a458510593a

  6. 看烦了VS2012的黑白调调了吗？换

    VS2012的默认深色主题的确让整个IDE看起来很有气场,而且深色的主题保护眼睛,还是蛮不错的.但是看久了也会烦啊.虽然说重要的不是IDE看起来怎么样,而是写出来的代码质量怎么样,但一个好的环境也是会 ...

  7. 【Leetcode_easy】961. N-Repeated Element in Size 2N Array

    problem 961. N-Repeated Element in Size 2N Array solution: class Solution { public: int repeatedNTim ...

  8. 【Luogu P3919】可持久化数组

    数组是一种单点修改,单点查询的基础数据结构. 如果要对数组改进,使之可持久化,那么显然我们需要利用其它的数据结构来改进它. 对于单点修改和单点查询两种操作,很容易发现可持久化线段树也是支持这种操作的. ...

  9. git和GitHub初级

    使用方式: 一种是本地创建一个文档, 然后在github上创建一个仓库, 在上传上去 一种是从仓库下载代码, 然后在本地编辑, 然后在上传上去 第一种: 首先在linux上创建一个文档, mkdir ...

  10. [CF1051F]The Shortest Statement_堆优化dij_最短路树_倍增lca

    The Shortest Statement 题目链接:https://codeforces.com/contest/1051/problem/F 数据范围:略. 题解: 关于这个题,有一个重要的性质 ...