精华内容
下载资源
问答
  • 这种通过$router对象点击获取值的方式,就在网上找了一些其他方式发现了props接收参数方法 实例如下: 首先是通过props设置为true,可以进行布尔传值,可以接受params方法进行传递 代码如下: { path:"zdh/:...

    今天在写路由的时候,不想使用
    this.$router.push({name: 'goodslist',params:{"list":this.list}})
    接收方法:this.$route.query.list
    这种通过$router对象点击获取值的方式,就在网上找了一些其他方式发现了props接收参数的方法

    实例如下:

    1. 首先是通过props设置为true,可以进行布尔传值,可以接受params的方法进行传递
      代码如下:
    	{
           path:"zdh/:name/:price",//定义其属性
           component:Zdh,
           props:true
        }
    

    在组件中可直接通过 props:[‘name’,‘price’] 来接收参数

    1. 其次是通过props为函数时进行传值,此时用的query方式进行参数的传递
      代码如下:
        // 方法一
    	{
           	path:"zdh",
            component:Zdh,
            props : (route) => ({
              name : route.query.name,
              age : route.query.age
            })
        }
        // 方法二
        {
    		path:"zdh",
            component:Zdh,
            // 将你传参query的所有值注入,接收的时候通过props接收就行 名称则是你传的名称
            props : (route) => (route.query)  
    	}
    
    	//方法一:
         props:['name','age']
       //方法二:
     	 props:{
     		name:{
     			type:[String,Number]
     		},
     		age:{
     			type:[String,Number]
     		}
     	 }
    

    在组件中可直接通过 如上方式来接收参数

    1. 最后是可以通过props为对象的方式进行处理静态数据,可使用对象模式
      代码如下:
    	{
             path:"zdh",
             component:Zdh,
             props:{                        
          	 	name:'zhaodonghao',
                age:55
             }
        }
    
    	// 方法一:
        props:['name','age']
        // 方法二:
        props:{
     		name:{
    			type:[String,Number]
    		},
    		age:{
    			type:[String,Number]
    		}
        }
    

    在组件中可直接通过 如上方式来接收参数

    参考链接

    展开全文
  • 在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定 URL 上使用,限制了其灵活性。通过props将组件和路由解耦,使得该组件更易于重用和测试

    在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。通过props将组件和路由解耦,使得该组件更易于重用和测试

     我们都知道,vue中父组件和子组件之间可以通过props传递数据。同样的,在路由中,也可以把路由上的参数传递给组件,具体有三种方式:1)布尔模式; 2)对象模式;3)函数模式。

    1.布尔模式

    router->index.js

     { path: '/hello/:name', component: Hello, props: true }, 

    App.vue

    <button><router-link to="/hello/you">hello/you</router-link></button>

     

    结果:Helloyou【Hello {{name}}】

    2.对象模式

    router->index.js

     { path: '/static', component: Hello, props: { name: 'world' }}, 

    App.vue

    <button><router-link to="/static">static</router-link></button>

    结果:Helloworld【Hello {{name}}】

    3.函数模式

    router->index.js

     { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn },

    App.vue

    	<button><router-link to="/dynamic/1">dynamic/1</router-link></button>

    结果:Hello2021!【Hello {{name}}】

    router->index.js部分代码

    function dynamicPropsFn (route) {
      const now = new Date()
      return {
        name: (now.getFullYear() + parseInt(route.params.years)) + '!'
      }
    }
    
    const routes = [
        { path: '/', component: Hello }, 
        { path: '/hello/:name', component: Hello, props: true }, 
        { path: '/static', component: Hello, props: { name: 'world' }}, 
        { path: '/dynamic/:years', component: Hello, props: dynamicPropsFn },
    ]

     App.vue部分代码

    <template>
    	<div id="app">
    		<div>
    			<button><router-link to="/">/</router-link></button>
    			<button><router-link to="/hello/you">hello/you</router-link></button>
    			<button><router-link to="/static">static</router-link></button>
    			<button><router-link to="/dynamic/1">dynamic/1</router-link></button>
    		</div>
    		<router-view></router-view>
    	</div>
    </template>

    Hello.vue(三种模式共用) 

    <template>
    	<div>
    		<h1>Hello{{name}}</h1>
    	</div>
    
    </template>
    
    <script>
    	export default{
    	 props: {
    	    name: {
    	      type: String,
    	      default: 'Vue!' //默认值
    	    }
    	  }
    	}
    </script>
    
    <style>
    </style>

    官方完整例子:https://github.com/vuejs/vue-router/tree/dev/examples/route-props

    展开全文
  • 1. 标签形式路由跳转 <router-link to="/home/... 1.1 参数传递种方式 <!-- 方式一 --> <router-link :to="'/home/goodsinfo?参数名='+传递参数"></router-link> <!-- 方式...

    1. 标签形式路由跳转

    <router-link to="/home/goodsinfo"></router-link>

        1.1 参数传递的两种方式

    <!-- 方式一 -->
    <router-link :to="'/home/goodsinfo?参数名='+传递参数"></router-link>
    
    <!-- 方式二 -->
    <router-link :to="'/home/goodsinfo/'+传递参数"></router-link>

       注意:方式二,需要在路由中配置(router.js)

    { path: "/home/goodsinfo/:参数名", component: goodsinfo }

       1.2 跳转页对应的获取参数方式

    // 方式一获取参数
    this.$route.query.参数名
    
    // 方式二获取参数
    this.$route.params.参数名

     

    2. 编程式路由跳转的4种方式

    <div @click="toDetails(参数值)"></div>

        2.1 methods中定义方法

    toDetails(id) {
        // 方式一  字符串
        this.$router.push('/home/goodsinfo?参数名='+参数值)
        // 方式二  对象
        this.$router.push({ path: '/home/goodsinfo?参数名='+参数值 })
        // 方式三  命名的路由
        this.$router.push({ name: 'goodsinfo', params: { 参数名: 参数值 }})
        // 方式四  带查询参数
        this.$router.push({ path: '/home/goodsinfo',query: { 参数名: 参数值 } })
    } 

      注意:其中方式三需要在路由中配置name(router.js)

    { path: "/home/goodsinfo/", component: goodsinfo, name: 'goodsinfo' }    // name用于命名路由跳转

    2.2 跳转页对应的获取参数方式

    // 方式一、方式二、方式四 获取参数
    this.$route.query.参数名
    
    // 方式三 获取参数
    this.$route.params.参数名

     

    展开全文
  • Vue路由传参的几种方式

    万次阅读 多人点赞 2018-07-28 23:52:40
    传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。 参考官网:https://router.vuejs.org/zh/guide/essentials/navigation.html params...

    前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效。传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。

    参考官网:https://router.vuejs.org/zh/guide/essentials/navigation.html

    params传参(url中显示参数)

    • 文件结构

    • 定义路由:在定义path路由路径时定义参数名和格式,如  path: "/one/login/:num" ,router>index.js文件如下
    /* eslint-disable*/
    
    //第一步:引用vue和vue-router ,Vue.use(VueRouter)
    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    
    //第二步:引用定义好的路由组件
    import ChildOne from '../components/childOne'
    import ChildTwo from '../components/childTwo'
    import Log from '../components/log.vue'
    import Reg from '../components/reg.vue'
    
    //第三步:定义路由(路由对象包含路由名、路径、组件、参数、子路由等),每一个路由映射到一个组件
    //第四步:通过new Router来创建router实例
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/one',
          name: 'ChildOne',
          component: ChildOne,
          children:[
            {
              path:'/one/log/:num',
              component:Log,
            },
            {
              path:'/one/reg/:num',
              component:Reg,
            },
          ],
        },
        {
          path: '/two',
          name: 'ChildTwo',
          component: ChildTwo
        }
      ]
    })
    • 在父路由组件上使用router-link进行路由导航,传参用<router-link to="/one/login/001">的形式向子路由组件传递参数。使用router-view进行子路由页面内容渲染,父路由组件childOne.vue 如下:
    <template>
      <div style="border:1px solid red;color:red;">
        <p>这是父路由childOne对应的组件页面</p>
        <p>下面可以点击显示嵌套的子路由 </p>
        <router-link to="/one/log/123">显示登录页面</router-link>
        <router-link to="/one/reg/002">显示注册页面</router-link>
        <router-view></router-view>
      </div>
    </template>
    • 子路由通过 this.$route.params.num 的形式来获取父路由向子路由传递过来的参数,子路由组件login.vue如下:
    <template>
      <div style="border:1px solid orange;color:orange;">
        <p>登录界面:这是另一个嵌套路由的内容</p>
        <h3>{{this.$route.params.num}}</h3>
      </div>
    </template>

    效果:

    注意:如上所述路由定义的path: "/one/login/:num"路径和to="/one/login/001"必须书写正确,否则不断点击切换路由,会因为不断将传递的值显示添加到url中导致路由出错,如下

    传递的值存在url中存在安全风险,为防止用户修改,另一种方式不在url中显示传递的值

     

    params传参(url中不显示参数)

    • 定义路由时添加name属性给映射的路径取一个别名,router>index.js文件修改router如下:
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/one',
          name: 'ChildOne',
          component: ChildOne,
          children:[
            {
              path:'/one/log/',
              name:'Log',
              component:Log,
            },
            {
              path:'/one/reg/',
              name:'Reg',
              component:Reg,
            },
          ],
        },
        {
          path: '/two',
          name: 'ChildTwo',
          component: ChildTwo
        }
      ]
    })
    • 在父路由组件上使用router-link进行路由导航,使用   <router-link :to="{name:'home',params:{id:001}}>    形式传递参数。注意   ': to= ' 前面的冒号,childOne.vue组件修改如下:
    <template>
      <div style="border:1px solid red;color:red;">
        <p>这是父路由childOne对应的组件页面</p>
        <p>下面可以点击显示嵌套的子路由 </p>
        <router-link :to="{name:'Log',params:{num:666}}">显示登录页面</router-link>
        <router-link :to="{name:'Reg',params:{num:888}}">显示注册页面</router-link>
        <router-view></router-view>
      </div>
    </template>
    • 子路由组件页面获取父路由传参方式不变,reg.vue 文件如下:
    <template>
      <div style="border:1px solid orange;color:orange;">
        <p>登录界面:这是另一个嵌套路由的内容</p>
        <h3>子路由获取的参数:{{this.$route.params.num}}</h3>
      </div>
    </template>

     

    注意:上述这种利用params不显示url传参的方式会导致在刷新页面的时候,传递的值会丢失;

     

     

    使用Query实现路由传参

    • 定义路由 router>index.js文件如下:
    export default new Router({
      mode: 'history',
      routes: [
        {
          path: '/one',
          name: 'ChildOne',
          component: ChildOne,
          children:[
            {
              path:'/one/log/',
              component:Log,
            },
            {
              path:'/one/reg/',
              component:Reg,
            },
          ],
        },
        {
          path: '/two',
          name: 'ChildTwo',
          component: ChildTwo
        }
      ]
    })
    • 修改路由导航 <router-link :to="{path:'/one/log',query:{num:123}}"> ,childOne.vue 文件修改如下:
    <template>
      <div style="border:1px solid red;color:red;">
        <p>这是父路由childOne对应的组件页面</p>
        <p>下面可以点击显示嵌套的子路由 </p>
        <router-link :to="{path:'/one/log',query:{num:123}}">显示登录页面</router-link>
        <router-link :to="{path:'/one/reg',query:{num:999}}">显示注册页面</router-link>
        <router-view></router-view>
      </div>
    </template>
    • 子路由组件通过 this.$route.query.num 来显示传递过来的参数,reg.vue 文件如下:
    <template>
      <div style="border:1px solid purple;color:purple;">
        <p>注册界面:这是二级路由页面</p>
        <h3>{{this.$route.query.num}}</h3>
      </div>
    </template>
    

    效果如下:

     

     

    PS: 在第一步的定义路由中我们都使用了mode:history 作用就是去除路由跳转时路由路径前的 “#”

    常用的mode模式有两种:

    默认为hash模式,最明显的标志是,URL上有#号 localhost:8080/#/,路由会监听#后面的信息变化进行路由匹配

    另一种为history模式,不会有#出现,很大程度上对URL进行了美化。需要**注意**history模式在打包后的路由跳转需要服务器配合

    默认不使用mode:history 如下

    展开全文
  • 1. 标签形式路由跳转1.1 参数传递种方式注意:方式二,需要在路由中配置(router.js){ path: "/home/goodsinfo/:参数名", component: goodsinfo }1.2 跳转页对应获取参数方式// 方式一获取参数this.$route....
  • vue传参的几种方式

    2019-07-19 08:59:20
    从一个页面传参到另一个页面 路由传参 步骤:1.首先我在home.vue中定义 updatas(id):指事件 id:传参数 updates(id){ this.$router.push({ path:'/world', name:'world', params:{ ...
  • 如下图所示,以子组件接收参数的方式为标准,路由传参可分为三方法。 方法一:利用动态路由传参 如下代码所示,配置路由。 {path: '/a/:num', name: A, component: A} 父组件中执行切换路由操作及传参,...
  • vue 路由跳转,路由传参的几种方式 1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link> 2...
  • vue路由传参的几种方式

    千次阅读 2020-06-09 14:36:01
    1、 this.$router.push进行编程式路由跳转 2、 router-link 进行页面按钮式路由跳转 3、 this.$route.params获取路由传递参数 4、this.$route.query获取路由传递参数 5、 params 和 query 都是传递参数,...
  • 路由传参的几种方式 比如:<div v-for="item in items" @click="get(item.id)"> 传参方式1:  1) get:function(id){  this.$router.push({ path: `/describe/${id}`})  }  2) 相应路由配置:  {...
  • 传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式。具体区分和使用后续分析。params传参(url中显示参数)文件结构定义路由:在定义path路由路径时定义参数名和格式...
  • VUE 项目中,页面之间跳转都需要使用路由,而路由在跳转时候需要传递各种参数也是一个很常见需求,那么 VUE 中路由传参几种方式呢? 方式一:直接调用$router.push 实现携带参数跳转 showDetail(id)...
  • 方案一: getDescribe(id) { ...// 直接调用$router.push 实现携带参数跳转 this.$router.push({ path: `/describe/${id}`, }) 方案一,需要对应路由配置如下: { path: '/describe/:id', ...
  • vue 路由传参虽然有好几种写法,但本质上分为两种,一种是 get 类型的传参,一种是 post 类型的传参。 1. get 类型的传参 get 类型传参的三种写法: this.$router.push('/addres?id=12345') this.$router.push({ ...
  • 前言《vue 基础》系列是再次回炉 vue笔记,除了官网那部分知识点外,还会加入自己一些理解。(里面会有部分和官网相同文案,有经验同学择感兴趣阅读)守卫这个思想,最初我是在 angular 看到,然而 vue...
  • 方法一:常规?和&链接传递参数 <router-link to='/a?id=1&age=18'>AA</router-link> ...跳转后获取参数,通过this.$route.query来获取,得到一个对象。...也可以用计算属性拿到,...方法二:vue推荐传参
  • 现有如下场景,点击父组件li元素跳转到子组件中,并携带参数,便于子组件获取数据。父组件中:&lt;li v-for="article in articles"...// 直接调用$router.push 实现携带参数跳转 this.$r...
  • this.$router.push跳转 现有如下场景,点击父组件li元素跳转到子组件中,并携带参数,便于子组件获取数据。父组件中: <li v-for="article in articles"@click="getDescribe(article.id)"> methods: ...
  • Vue路由传参的3种方式

    2019-07-05 19:07:31
    Vue路由传参的几种方式 例如: 传一个id=123 1.直接拼上(本质params方式?) 配置:routes:[{path: “/user/:id”, component: User}] 跳转:this.$router.push({“/user/123}”}) //当然动态的话写成/user/${id} 取id:...
  • 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准Markdown编辑器功能,我们增加了如下点新功能,帮助你用它写博客: 首先在 router.js 中给 路由对象 path属性拼接参数 。 首先在 router.js 中...
  • //直接调用$router.push 实现携带参数跳转 this.$router.push({ path: `/particulars/${id}`, }) } 路由配置 { path: '/particulars/:id', name: 'particulars', component: particulars

空空如也

空空如也

1 2 3 4
收藏数 62
精华内容 24
关键字:

router传参的几种方式vue

vue 订阅