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. Ionic4.x Modal模态对话框以及 Modal 传值

    1.Modal 模态对话框简介 官方文档:https://ionicframework.com/docs/api/modal Modal模态对话框主要用于登录注册页面,我们可以把它理解为从页面底部弹出 ...

  2. Ionic4.x 创建页面以及页面跳转

    创建页面: 1.cd 到项目目录 2.通过ionic g page 页面名称 3.创建完成组件以后会在 src 目录下面多一个 button 的目录,它既是一个页面也是一个 模块. 4.如果我们想在 ...

  3. osg HUD 前景色

    #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...

  4. react中异步的使用

    let promise; promise = this.props.corporationService.preSearchPage(params); promise.then((data) => ...

  5. WebStorm+Chrome调试Vue步骤

    在调试时请 注意 : 在WebStorm中启动调试时,WebStorm会根据你设置的url,自动打开新的Chrome浏览器进程访问这个设置的url,而且这个浏览器页面和你平常看到的浏览器差异会比较大, ...

  6. ERNIE 2.0 理解与使用

    更新中 更新时间:2019-12-06 17:43:27 实验需要,在自己学习的过程中做如下笔记,欢迎指正,欢迎交流. 1. ERNIE简述 ERNIE和BERT一样,也是基于transformer来 ...

  7. SecureCRT 配色方案

    整体效果: 一:Options -- Global Options 1.Normal colors     2.Bold colors 二 :Options -- Session Options 1. ...

  8. RocketMQ之三：RocketMQ集群环境搭建

    1.初步理解Producer/Consumer Group 在安装RocketMQ之前我们先来理解Group概念,在RocketMQ中Group是很重要的.通过Group机制,让RocketMQ天然的 ...

  9. Druid基本配置

    最近公司要用Druid 所以看了下基本配置及配置过程中出现的问题 Druid是什么? Druid是阿里巴巴开源平台上一个数据库连接池实现,它结合了C3P0.DBCP.PROXOOL等DB池的优点,同时 ...

  10. Office常用快捷键大全，包含 Word、Excel、PowerPoint

    功能 快捷键 查找文字.格式和特殊项 Ctrl+G 使字符变为粗体 Ctrl+B 为字符添加下划线 Ctrl+U 删除段落格式 Ctrl+Q 复制所选文本或对象 Ctrl+C 剪切所选文本或对象 Ct ...