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. Bitmap添加水印效果

    package com.loaderman.customviewdemo; import android.app.Activity; import android.graphics.Bitmap; i ...

  2. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_01-我的课程-需求分析与PageHelper技术

    1 我的课程 1.1需求分析 课程添加完成后可通过我的课程进入课程修改页面,此页面显示我的课程列表,如下图所示,可分页查询. 注意:由于课程图片服务器没有搭建,这里在测试时图片暂时无法显示. 上边的查 ...

  3. spark中的cache和persist的区别

    在使用中一直知其然不知其所以然的地使用RDD.cache(),系统的学习之后发现还有一个与cache功能类似看起来冗余的persist 点进去一探究竟之后发现cache()是persist()的特例, ...

  4. 导出 VuePress构建的网站为 PDF

    前言 学 Rust 也有一段时间了,网上也有不少官方文档的中文翻译版,但是似乎只有 Rust中文网站 文档一直是最新的,奈何并没有 PDF 供直接下载,是在是不太方便,为了方便阅读以及方便后续文档更新 ...

  5. mysql删除某一个数据库中所有的表

    SELECT concat('DROP TABLE IF EXISTS ', table_name, ';') FROM information_schema.tables WHERE table_s ...

  6. iOS-二维码扫描界面（转）

    网址学习:http://blog.csdn.net/linux_zkf/article/details/7724867     二维码扫描界面自定义 作者:朱克锋 邮箱:zhukefeng@iboxp ...

  7. Docker 镜像的推送(六)

    目录 一.为镜像命名 二.推送到官方 Docker Hub 1.首先得在 Docker Hub 上注册一个账号. 2.在 Docker Host 上登录 3.修改镜像命名 4.镜像上传 5.登录查看上 ...

  8. Nginx+keepalived 高可用双机热备（主从模式/双主模式）

    基础介绍负载均衡技术对于一个网站尤其是大型网站的web服务器集群来说是至关重要的!做好负载均衡架构,可以实现故障转移和高可用环境,避免单点故障,保证网站健康持续运行. 关于负载均衡介绍,可以参考:li ...

  9. python-继承之多继承

    class BaseRequest(): pass class RequestHandler(BaseRequest): def serve_forever(self): print('Request ...

  10. 原生JS+ CSS3创建loading加载动画；

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...