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. python小白之数组索引

    索引 numpy中的数组索引形式和Python是一致的.如: np.arange(10) print x[2]  #单个元素,从前往后正向索引.注意下标是从0开始的. print x[-2]  #从后 ...

  2. cookie和session-csrf防护-中间件

    cookie概念: 是由服务器生成,保存在浏览器端的一小段文本信息. cookie特点: 1) cookie是以键值对进行存储的. 2) 浏览器访问网站时,会将本地保存的跟网站相关的所有cookie发 ...

  3. iOS 在iphoneX上运行的app没有icon图标，在其他手机上有图标

    今天朋友问了一个问题,在iPhoneX上运行的app没有icon图标,在其他手机上有图标. 一开始我以为是没放iPhoneX的图标,后面朋友解决了,告诉了我原因,这里记录下吧: 原因: 图标格式问题, ...

  4. Nginx作为负载均衡把客户端真实IP发送给后端配置

    Nginx作为负载均衡获取到客户端的真实IP,但是后端获取到的IP为nginx负载均衡的IP,需要修改配置使后端获取到客户端的真实IP 修改nginx配置增加3行 proxy_set_header H ...

  5. iOS-UINavigationController多控制器管理

    UINavigationController 7.8.1 添加子控制器进栈 UINavigationController *nav = [[UINavigationController alloc]  ...

  6. 【c# 学习笔记】子类的初始化顺序

    使用了继承之后,当我们初始化一个子类时,除了会调用子类的构造函数外,同时也会调用基类的构造函数.子类的初始化顺序如下: ① 初始化类的实例字段: ② 调用基类的构造函数,如果没有指明基类,则调用Sys ...

  7. C/C++语言，自学资源，滚动更新中……

    以下教学视频中,缺少对“字符串”技术的讨论,大家注意看书. 一维数组,及其举例:(第四版)P77~P85,书上这部分内容写的很好,很详细,尤其是这里列出来的每一个例子都要仔细去看一看,对你会很有帮助. ...

  8. go项目部署到linxu

    环境: 在mac上编译, 编译后上传到linux, 然后运行代码 go项目打包 一.直接部署到linux 1. 在mac上, 进入到项目目录, 执行以下命令, 进行编译: CGO_ENABLED=0 ...

  9. VBA实现打开Excel文件读取内容拷贝Format且加超链接

    '-------------------一覧取得----------------------------- Sub getRedmineGrid_Click() Dim wb As Workbook ...

  10. js 读取文本文件,日志内容

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...