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. SpringCloud学习成长之路 五 路由器网关

    在微服务架构中,需要几个基础的服务治理组件,包括服务注册与发现.服务消费.负载均衡.断路器.智能路由.配置管理等,由这几个基础组件相互协作,共同组建了一个简单的微服务系统.一个简答的微服务系统如下图: ...

  2. Oracle SQL 脚本跟踪

    NC Oracle SQL 脚本跟踪 脚本: select * from v$sqlarea a and a.LAST_ACTIVE_TIME >= to_date( '2013-02-21 1 ...

  3. jquery控制一个元素是否显示

    比如说我有一个id为dlg-buttons的div元素. 我可以通过 $('#dlg-buttons').show(); 让他显示出来: 可以通过 $('#dlg-buttons').hide(); ...

  4. iOS开发设计模式

    ios开发学习中,经常弄不清楚ios的开发模式,今天我们就来进行简单的总结和探讨~ (一)代理模式 应用场景:当一个类的某些功能需要由别的类来实现,但是又不确定具体会是哪个类实现. 优势:解耦合 敏捷 ...

  5. windows下进程与线程

    windows下进程与线程 Windows是一个单用户多任务的操作系统,同一时间可有多个进程在执行.进程是应用程序的运行实例,可以理解为应用程序的一次动态执行:而线程是CPU调度的单位,是进程的一个执 ...

  6. 最新 网易java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易.京东.去哪儿等10家互联网公司的校招Offer,因为某些自身原因最终选择了网易.6.7月主要是做系统复习.项目复盘.LeetCode与牛客刷题 ...

  7. @ResponseBody使用

    @responseBody注解的作用是将controller的方法返回的对象通过适当的转换器转换为指定的格式之后,写入到response对象的body区,通常用来返回JSON数据或者是XML 数据,需 ...

  8. python条件判断if/else - python基础入门(8)

    生活中我们总是面临各种选择,选择不同,结果也不同,不管我们是否愿意,总会有结果,有的快乐,也有的痛苦…… 鲁迅说:人只要有钱,烦恼就会减掉90%以上,情商智商也会提高,更不会乱发火!(关键是:钱怎么来 ...

  9. JVM —— 类文件结构（下）

    简介 Java虚拟机的指令由一个字节长度的.代表着某种特定操作含义的操作码(opcode)以及跟随其后的零至多个代表此操作所需参数的操作数(operand)所构成 虚拟机中许多指令并不包含操作数.只有 ...

  10. EventLoop介绍

    在Netty中使用EventLoop接口代表事件循环,EventLoop是从EventExecutor和ScheduledExecutorService扩展而来,所以可以讲任务直接交给EventLoo ...