vue2动态路由传参2种方式params与query

一、params

1、传:

1)、动态路由匹配(路由配置里写)

    { 
        name:"user",
        path: '/user/:id', 
        component: User
    }   //id:相当于声明了变量

2)、跳转时传参

    1)、跳转时,使用字符串
    //声明式
    <router-link to="/user/01001">用户01001的信息router-link>
    //编程式
    this.$router.push("/user/01001");
    2)、跳转时,使用对象
    //声明式: 命名的路由,同时传参
    //注意:params使用对象方法传参时,不能使用path属性
    <router-link :to="{ name: 'user', params: { id: '01001' }}">Userrouter-link>
    //编程式:
    this.$router.push({ name: 'user', params: { id: '01001' }})

2、接:

    //模板里的写法:
     $route.params.参数名
     //脚本里的写法:
     this.$route.params.参数名
二、query

1、传:

1)、路由配置不用改(不用动态路由匹配)

    { path: '/Reg', component: Reg }

2)、跳转时,使用 path

    //1)、跳转时,使用字符串
    //声明式: 
    <router-link to="/Reg?userid=007&username=mjl">Userrouter-link>
    //编程式:
    this.$router.push("/Reg?userid=007&username=mjl");
//2)、跳转时,使用对象:
    //声明式: 
    <router-link :to="{ path: '/user', query: { id: '01001' }}">Userrouter-link>
    //编程式:
    $router.push({ path: '/user', query: { id: '01001' }})
注意:如果提供了 path,那么params 会被忽略
    // 带查询参数,变成 /user?id=01001

      

        <router-link :to="{
          path:'/homequery',
          query:{
            id:999,
            title:'heihei'
          }
        }">跳转2router-link><br>

params和query的对象写法的区别:

name 对应params

path对应query

2、接

//模板里的写法:
$route.query.参数名

//脚本里的写法:
this.$route.query.参数名

使用场景的区别:

query:传递多个参数时,query方式对应的地址栏上好阅读。

params:传递一个参数时,比较方便

模板里的写法:
$route.params.id 
     
脚本里的写法:
this.$route.params.id

router和route

$router:表示vueRouter对象,由于我们在vue对象里把vueRouter对象
         植入到根属性里,所以,在组件内部是可以使用$router拿到该对象的。
         
$route: 表示匹配到的当前路由对象,可以简单粗暴的理解为,路由配置中
         的某个json对象。当然,这个对象里的信息比路由配置的更多。

你可能感兴趣的:(javascript,前端,vue.js)