vue路由参数

1、参数router-link

vue.prototype.xxx = {add:fn}`
所有组件中，使用this.xxx就能拿到这个对象
2、查询字符串

（1）配置：

:to="{name:'detail',query:{id:hero.id} }"

（2）规则：

{name:'detail',path:'/detail',component:Detail}`

（3）获取：

this.$route.query.id

（4）生成：

<a href="/detail?id=1">

3、path方式

（1）配置：

:to="{name:'detail',params:{id:hero.id}

（2）规则 ：

{ name:'detail',path:'/detail/:id'}

（3）获取：

this.$route.params.id

4、查询字符串配置参数
（1）router-link一次
（2） 获取的时候一次

5、 path方式配置参数
（1） router-link一次
（2）规则配置的时候声明位置
（3） 获取的时候一次

6、总结书写代码注意事项
　　path方式需要在路由规则中声明位置

7、vue-router中的对象

* $route 路由信息对象,只读对象
* $router 路由操作对象,只写对象

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>路由参数</title>

</head>

<body>

    <div id="app"></div>

    <!-- 引入vue.js文件 -->

    <script src="js/vue.js"></script>

    <!-- 引入核心vue-router包 -->

    <script src="node_modules/vue-router/dist/vue-router.js"></script>

    <script>

        // 地址栏 路由范式

        // （1）xxxxx.html#/user/1    params 动态路由参数

        // (2) ooooo.html#/user?userId = 1  query

        Vue.use(VueRouter);

        // 声明组件

        var User1={

            template:`<div>我是用户1</div>`,

            created(){

                console.log(this.router);

                console.log(this.route);

            }

        }

        var User2={

            template:`<div>我是用户2</div>`,

            created(){

                console.log(this.router);

                console.log(this.route);

            }

        }

        // 创建路由对象

        var router=new VueRouter({

            // 配置路由对象

            routes:[

            // 匹配路由对象

                {

                    // 动态路由参数，以冒号开头

                    path:'/user/:id',

                    name:'user1',

                    component:User1

                },

                {

                    // 动态路由参数，以冒号开头

                    path:'/user/',

                    name:'user2',

                    component:User2

                }

            ]

        });

        // 抛出两个全局组件router-link、router-view

        // 抛出了两个对象  $router  $route (路由信息对象)挂载到了Vue实例化对象

        var App={

            //

            // <router-link :to = "{name:'userQ',query:{userId:2}}">用户2</router-link>

            template:`

                <div>

                    <router-link :to = "{name:'user1',params:{id:1}}">用户1</router-link>

                    <router-link :to = "{name:'user2',query:{userId:2}}">用户2</router-link>

                    <!--路由组件的出口-->

                    <router-view></router-view>

                </div>

            `,

        }

        // 实例化一个对象

        new Vue({

            el:'#app',

            router:router,

            template:`<App />`,

            components:{

                App

            }

        });

    </script>

</body>

</html>

Vue路由参数的更多相关文章

  1. VUE 路由参数改变重新刷新数据

    VUE 路由参数改变重新刷新数据 App.vue 里面使用路由,然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表. 修改 index.js 文件 首先在路由文件 index.js 文件中 ...

  2. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  3. vue路由参数的获取、添加和替换

    获取路由参数 getUrlKey(name){//获取url 参数 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&am ...

  4. vue 路由参数变化，页面不更新的问题

    监控$route 在vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,如果不监听路由参数值的变化,页面无数据刷新,需手动刷新浏览器,这样做就不是我们的预期效果. 举例:当前路由为  /p ...

  5. vue 路由参数

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue路由参数设置可有可无

    参数后面使用 ? id 后面加个 ‘ ? ’ ,将 id 设置为可选参数 { name: "index", path: '/p/:id?', component: resolve ...

  7. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

  8. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  9. vue 路由 及 跳转传递参数的总结

    博客地址:https://ainyi.com/4 vue-router vue-router 是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基 ...

随机推荐

  1. 002-poi-excel-导出设置单元格数据校验规则、筛选功能

    一.数据验证概述 推荐以下操作在2007之后操作 1.1.查看excel的数据验证 1.进入 2.设置规则 通过验证条件允许,可以看到是每个单元格默认只成立一种条件 1.2.POI代码开发-数据验证 ...

  2. ReentrantLock、Condition结合使用实现多线程通讯

    package maptoxml; import java.util.concurrent.ExecutorService;import java.util.concurrent.Executors; ...

  3. 123456---com.twoapp.xiaoxiaozuqiujiang---小小足球将

    com.twoapp.xiaoxiaozuqiujiang---小小足球将

  4. 利用python批量修改word文件名的方法示例

    利用python批量修改word文件名的方法示例 最近不小心把硬盘给格式化了,由于当时的文件没有备份,所以一下所有的文件都没有了,于是只能采取补救措施,用文件恢复软件恢复了一部分的数据出来,但是恢复完 ...

  5. Kali之Metasploit生成apk后门控制安卓

    扫盲教程,大佬勿喷. 实验中请更改为你环境的IP. 生成apk后门 Kali Linux(Hack):192.168.169.76 Android(靶机):192.168.169.137 启动kali ...

  6. F2812 DSP程序运行在片内RAM和FLASH的区别

    F2812 DSP程序运行在片内RAM和片内FLASH的区别 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:F2812是带有内部Flash的DSP,与 ...

  7. (1) laravel php artisan list make

    php artisan list make Laravel Framework 5.4.36 Usage: command [options] [arguments] Options: -h, --h ...

  8. 总结几个最近处理问题中使用http协议的代码

    demo1:几个不同的http请求方式总结: ----------------------------------------------------------------------------- ...

  9. 【leetcode算法-中等】3. 无重复字符的最长字串

    [题目描述] 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb"输出: 3 解释: 因为无重复字符的最长子串是 " ...

  10. 《ucore lab1 exercise3》实验报告

    资源 ucore在线实验指导书 我的ucore实验代码 题目:分析bootloader进入保护模式的过程 BIOS将通过读取硬盘主引导扇区到内存,并转跳到对应内存中的位置执行bootloader.请分 ...