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. 数据结构与抽象 Java语言描述 第4版 pdf （内含标签）

    数据结构与抽象 Java语言描述 第4版 目录 前言引言组织数据序言设计类P.1封装P.2说明方法P.2.1注释P.2.2前置条件和后置条件P.2.3断言P.3Java接口P.3.1写一个接口P.3. ...

  2. 增强篇6 CMOD增强删除

    CMOD实施了一个增强,但是不需要了,怎么删除呢? 要删除PPCO0005 这个增强,进入编辑状态,发现没有删除按钮,  把PPCO0005 这项删除掉 敲回车,厉害了,他又回来了,所以在这里是没法删 ...

  3. 把总数amount拆分以标准差最小的标准,平均拆分成count个整数

    public function tt_add(){ $res = $,); echo array_sum($res); echo '----' . count($res); dump($res); e ...

  4. 【pod无法删除 总是处于terminate状态】强行删除pod

    加参数 --force --grace-period=0,grace-period表示过渡存活期,默认30s,在删除POD之前允许POD慢慢终止其上的容器进程,从而优雅退出,0表示立即终止POD ku ...

  5. 【GStreamer开发】GStreamer基础教程06——媒体格式和pad的Capabilities

    目标       Pad的Capabilities是一个GStreamer element的基础,因为framework大部分时间是自动处理的,所以我们几乎感觉不到它的存在.本教程比较偏向原理,介绍了 ...

  6. 按键板的原理和实现--基于GPIO的按键板

    上篇介绍简单的ADC实现,需要IC提供一个额外的ADC.但出于IC成本的考虑,无法提供这个的ADC时,但提供了多个额外的GPIO(General Purpose Input Output:双向的:可以 ...

  7. spring结合shiro的学习总结

    pom文件加入 <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-c ...

  8. 乐字节Java|封装JavaBean、继承与权限修饰

    本文继续讲Java封装.上一篇:乐字节Java|GC垃圾回收机制.package和import语句 这次讲述JavaBean.继承与权限修饰 一. 封装javaBean 封装(Encapsulatio ...

  9. [.Net] - 使用 iTextSharp 生成基于模板的 PDF，生成新文件并保留表单域

    背景 基于 PDF Template 预填充表单项,生成一份新的 PDF 文件,并保留表单域允许继续修改. 代码段 using iTextSharp.text.pdf; /* Code Snippet ...

  10. oracle 常用sql 经典sql函数使用 sql语法

    各种树操作, 用来查询表中带有子父节点的信息 Oracle 树操作(select-start with-connect by-prior) select m.org_id from sm_organ ...