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. 在EXE和DLL中，FindResource的区别

    转载:https://blog.csdn.net/ithzhang/article/details/7995102 在EXE和DLL中,FindResource的区别 以下的代码在EXE中,执行无误. ...

  2. Spring cloud微服务安全实战-6-7jwt改造总结

    限流的改造. 同样注意,不要声明成Spring的Bean 在上面声明Rateliiter 如果能获取到权限继续往下走,没权限就返回,to many request的错误信息. 加到过滤器链上 加载Sp ...

  3. 【Java】Spring快速入门（一）

    Spring介绍 Spring可以轻松创建Java企业应用程序.它提供了在企业环境中使用Java语言所需的一切,支持Groovy和Kotlin作为JVM上的替代语言,并可根据应用程序的需要灵活地创建多 ...

  4. 忏悔言情小说带来的意淫以及对治方法 (转自学佛网：http://www.xuefo.net/nr/article55/554935.html)

    小时候,因为父母经常吵架,我觉得很孤独,一个人经常孤零零的,就喜欢一个人看书,大人的书难免里面有情情爱爱的内容,结果就很喜欢里面的深情的爱情故事,总是幻想自己有一段爱情.其实就是意淫的开始,所以后来学 ...

  5. prometheus数据格式

    注意区分以下两种“数据格式”: 1.自定义exporter的时候所需要遵循的给prometheus提供数据的数据格式: https://yunlzheng.gitbook.io/prometheus- ...

  6. html的输出&，空格，大小于号

    最近定做安装程序,因为这次定做名字里有&符号,用微软的txt文本打开配置文件,在配置文件里修改了名称,名称在文本里显示正常,但是定做出来后,发现&符号变成了_下划线,在本来的& ...

  7. 【Leetcode_easy】860. Lemonade Change

    problem 860. Lemonade Change solution class Solution { public: bool lemonadeChange(vector<int> ...

  8. 预训练中Word2vec,ELMO,GPT与BERT对比

    预训练 先在某个任务(训练集A或者B)进行预先训练,即先在这个任务(训练集A或者B)学习网络参数,然后存起来以备后用.当我们在面临第三个任务时,网络可以采取相同的结构,在较浅的几层,网络参数可以直接加 ...

  9. 异步I/O、事件驱动、单线程

    异步I/O.事件驱动.单线程 nodejs的特点总共有以下几点 异步I/O(非阻塞I/O) 事件驱动 单线程 擅长I/O密集型,不擅长CPU密集型 高并发 下面是一道很经典的面试题,描述了node的整 ...

  10. git下载仓库的部分目录

    有这样的需求,比如某个仓库里包含可执行文件[编译后的文件]或jar包之类的,他们太大我不需要而且我自己可以编译或导入: 或者是某个仓库是自己专门用来放demos的,里面有很多的demo项目,我可能只想 ...