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. 全面系统Python3入门+进阶-1-3 我为什么喜欢Python

    结束

  2. 构造方法(和python初始化变量类似)

    public class Demo1 { int  name2=1; public Demo1(int name) { name=name2; } public Demo1() { } public ...

  3. 利用 Postman 中 Tests 断言校验返回结果

    前言 Postman目前是一款很火的接口测试工具,它有着非常强大结果判断能力.为什么说强大呢,因为Postman有自带的校验脚本,根本不需要我们去学习JS脚本语言,对于代码能力为0的各位测试小伙伴来说 ...

  4. 线性回归:boston房价

    from sklearn.linear_model import LinearRegression,Lasso,Ridge from sklearn.datasets import load_bost ...

  5. LeetCode：三数之和【15】

    LeetCode:三数之和[15] 题目描述 给定一个包含 n 个整数的数组 nums,判断 nums 中是否存在三个元素 a,b,c ,使得 a + b + c = 0 ?找出所有满足条件且不重复的 ...

  6. Jupyter notbook 修改默认路径

    打开 cmd 输入命令 jupyter notebook --generate-config  2.打开配置文件  3.修改路径  转自: https://blog.csdn.net/zw__chen ...

  7. extract()函数：用于从一个date或者interval类型中截取到特定的部分

    extract()函数:用于从一个date或者interval类型中截取到特定的部分 ### extract 语法extract ( { year | month | day | hour | min ...

  8. shiro 的session持久化

    对于分布式系统,一般都牵扯到Session共享问题,而想实现Session共享,就要实现Session的持久化操作,即是将内存中的Session持久化至缓存数据库. SessionDAO是Shiro提 ...

  9. NumPy使用图解教程

    NumPy是Python中用于数据分析.机器学习.科学计算的重要软件包.它极大地简化了向量和矩阵的操作及处理.python的不少数据处理软件包依赖于NumPy作为其基础架构的核心部分(例如scikit ...

  10. 关于JavaScript 基础总结

    Dom:document object model 即文档对象模型 Bom: browser object model 即浏览器对象模型 文档对象模型即与文本密切相关,比如document.query ...