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. ES6深入浅出-4 迭代器与生成器-4.总结

    yield的值就是外面调用next得到的值 ES6给的新的语法,如果你给任何一个对象添加一个Symbol.interator的key,同时它的值是一个生成器. 下面选中的就是生成器.生成返回的东西是迭 ...

  2. Java EE互联网轻量级框架整合开发— SSM框架（中文版带书签）、原书代码

    Java EE互联网轻量级框架整合开发 第1部分 入门和技术基础 第1章 认识SSM框架和Redis 2 1.1 Spring框架 2 1.2 MyBatis简介 6 1.3 Spring MVC简介 ...

  3. linux系统实现多个进程监听同一个端口

    通过 fork 创建子进程的方式可以实现父子进程监听相同的端口. 方法:在绑定端口号(bind函数)之后,监听端口号之前(listen函数),用fork()函数生成子进程,这样子进程就可以克隆父进程, ...

  4. 知识点-Spark小节

    Spark处理字符串日期的max和min的方式Spark处理数据存储到Hive的方式Spark处理新增列的方式map和udf.functionsSpark处理行转列pivot的使用Python 3.5 ...

  5. 重磅！滴滴跨端框架Chameleon 1.0正式发布

    滴滴在 GitHub 上开源的跨端解决方案 Chameleon(简写 CML)正式发布 1.0 版本,中文名卡梅龙:中文意思变色龙,意味着就像变色龙一样能适应不同环境的企业级跨端整体解决方案,具有易用 ...

  6. 查看Mysql是否开启binlog

    show variables like 'log_bin';

  7. 代理工具WebScarab安装(转载)

    原文地址:https://blog.csdn.net/shiyuqing1207/article/details/46428443 2015年06月09日 16:31:52 shiyuqing1207 ...

  8. linux查看文件前几行和后几行的命令

        可以使用head(查看前几行).tail(查看末尾几行)两个命令.例如:查看/etc/profile的前10行内容,应该是:# head -n 10 /etc/profile查看/etc/pr ...

  9. Python07之分支和循环2（if...else、if...elif...else）

    一:if语句具体语法: if 表达式: 语句块 (表达式可以是一个布尔值或变量,也可以为一个逻辑表达式或比较表达式,表达式为真(即不为0即可,见下方实例),则运行语句块:表达式为假,则跳过语句块,继续 ...

  10. 2019秋季PAT甲级_备考总结

    2019 秋季 PAT 甲级 备考总结 在 2019/9/8 的 PAT 甲级考试中拿到了满分,考试题目的C++题解记录在这里,此处对备考过程和考试情况做一个总结.如果我的方法能帮助到碰巧点进来的有缘 ...