VueRouter笔记 - 路由参数（query/params/props/meta）

路由参数

目录

• 路由参数
  • 1. query
  • 2. params参数
  • 3. props参数
  • 4. meta参数

1. query

• query可以用于在不同路由之间传递数据（大多数是父传子）

• 一般网页在跳转时显示的链接，?后面就是query，数据与数据之间用&链接，举例：

  <router-link to="/home/message/detail?id=001&title=hello">消息</router-link>
  

  这一行链接传递了id: '001'，和title: 'hello'两个参数，它们都被储存在当前页面route的query对象中。根据这点，再使用对象+绑定就可以写出传递动态参数的链接：

  <router-link :to="{
  	path:'/home/message/detail',
      query:{
      	id:m.id,
          title:m.title
      }
  }">消息</router-link>
  

  使用模板字符串也可以，但是无论是可读性和操作性都不太行

  <router-link :to="`/user/message/detail?id=${m.id}&title=${m.title}`">消息</router-link>
  

• 传递之后调用

  <template>
    <div>
  	序号:{{ $route.query.id }}
  	标题:{{ $route.query.title }}
    </div>
  </template>
  

2. params参数

• params和query类似，也可以用于传参，但是传递的方式和接受方法略有不同

• 一般网页在跳转时显示的链接，query会直接接在/后面，并且数据之间也是由/连接，这可能导致误解，需要注意

  <router-link to="/home/message/detail/001/hello">消息</router-link>
  

  可以看到链接中并没有显示接受参数的变量，因为这些变量需要在路由中通过占位符:[变量名]提前确定

  const routes = [
    {
      path: '/user',
      component: User,
      children: [
        {
  		name: 'userNews'
          path: 'news/:id/:title',
          component: News,
        },
      ],
    },
  ]
  

• 动态传递参数的方法和query差不多

  <!--注意：如果对象中带有params，那么路径部分只能使用name，不能使用path!!!!!-->
  <router-link :to="{
  	name:'detail',
      params:{
      	id:m.id,
          title:m.title
      }
  }">消息</router-link>
  

  当然用模板字符串也可以

  <router-link :to="`/user/message/detail/${m.id}/${m.title}`">消息</router-link>
  

3. props参数

• 在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。简单来说，就是要把诸如$route.params.id 的表达式转化成 id 这样简明的表达式

  （实际上props并不算好用，实际使用的频率也不高，稍作了解即可）

• props通常在router中配置，并且需要配合query或params，这样传递过去的参数就不需要依赖$router

  props有三种模式：布尔模式、对象模式、函数模式。这里只介绍函数模式，因为其适用于绝大多数情况

  //配合query使用
  const router = new VueRouter({
    routes: [
      {
        path: '/search',
        component: SearchUser,
        props(route){
            return{
                id:route.query.id,
                title:route.query.title
            }
        }
      }
    ]
  })
  

  调用

  <template>
    <div>
  	序号:{{ id }}
  	标题:{{ title }}
    </div>
  </template>
  
  <script>
  	export default{
          name:'Detail',
          props:['id','title']
      }
  </script>
  

4. meta参数

• query和params需要等待其他组件在调用时传递参数，但有时需要路由本身就自己携带一些参数，此时就可以使用meta参数

  //该页面的route中将带有isAuth:false这个meta参数
  const routes = [
    {
      path: '/user',
      component: User,
      meta:{isAuth:false}
    },
  ]
  

  调用

  if($route.meta.isAuth === true){...}