bob体育官方平台
安详严整vue嵌套路由-params传递参数_vue.js_脚本之家

bob体育官方平台,在嵌套路由中,父路由向子路由传值除了query外,还会有params,params传值有二种情景,风华正茂种是值在url中彰显,别的黄金年代种是值不展现在url中。

1、链接传参:

main.js params传值是经过 :[参数值] 如path: "/home/game/:num"

bob体育app,  例如:链接是:

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use //引入两个组件 import home from "./home.vue" import game from "./game.vue" //定义路由 const routes = [ { path: "/", redirect: "/home" },//重定向 { path: "/home", component: home, children: [ { path: "/home/game/:num", component: game } ] } ] //创建路由实例 const router = new VueRouter new Vue({ el: '#app', data: { id:123, }, methods: { }, router }) 

  大家要博得参数:console.log(this.$route.query.id卡塔尔国;就可以

home.vue 在home中实际的值就跟在渠道后边,如 “/home/game/123”,也等于说传递给子路由的值便是 123

 

  首页  显示     

2、路由传参:

game.vue 在子路由中,通过 this.$route.params.参数名来经受传递过来的值

  (一、显示在url中)

 王者荣耀{{ this.$route.params.num }}  

  main.js params传值是透过 :[参数值] 如path: "/home/game/:num"

2、不显得在url中,借使在PC端将传递的值展现在url中,那样平空就存在安全隐患,假设顾客相当的大心改善了url那样就能出错,移动端就不介意了,如何技能不显得在url中,同样比很粗大略,然则急需给映射的路子起叁个别称,通过name来取别称

    例:

如出大器晚成辙只需将上边的main.js中的定义路由改为如下样子,在子路由中通过name来给路线其叁个game1的小名。

{ 
    path: "/home", component: home, 
    children: [ 
      { path: "/home/game/:num", component: game } 
    ] 
  } 
//定义路由 const routes = [ { path: "/", redirect: "/home" },//重定向 { path: "/home", component: home, children: [ { name: "game1", path: "/home/game/", component: game } ] } ] 

  父组件路由跳转写法:

home.vue 中router-link校勘为:to="{ name:'game1', params: {num: 123} }" params中是要传送的参数,那样传递的参数就不会展现在url中。

    :to="{path:'/game/'+item.Id}"

  首页  显示     

  子组件取路由参数:

如上就是本文的全体内容,希望对大家的读书抱有利于,也愿意大家多都赐教脚本之家。

    通过 this.$route.params.参数名来经受传递过来的值

返回顶部