vue路由传参详解

vue 路由传参

基本介绍

路由传参 ：

​ 项目中有应用场景是这样的：

​ 电影列表页面中，每个电影项目都有详情页面，为了知道哪个电影被展示查看，需要在路由地址中额外设置电影的数字id信息(如下图)，以便据此查询电影，这个电影id就是“路由传参”。

语法使用

实现案例效果：

​ 单击电影列表项目，进入电影详情页面，并对当前电影项目的id信息传递接收。

路由：

/movie -------------Movie

/detail --------------Detail

声明路由参数：

{ path: '/dt/:xx/:yy/:zz', component: Detail }

// 通过 :xx 的方式声明参数，一个或多个都可以，彼此通过 /斜杠 分隔。

接收路由参数：

<标签>{{$route.params.xx}}</标签>  < !-- template模板中 -- >

<script>
new Vue({
  created(){
    this.$route.params.xx   // 组件实例内部
  }	
})
</script>

模板 和 Vue实例内部都可以接收路由参数。

案例使用

电影列表展示详情应用。

步骤：

1. 创建业务组件 src/components/Movie.vue，展示电影列表：

   <template>
       <div>
         <h3>电影列表展示</h3>
         <ul>
           <!-- 给router-link设置属性，使得生成其他标签(默认生成a标签) 
             tag="标签名称" ，变为其他标签，不影响单击效果
             <li data-v-358f1330="" class=""> 第一滴血 </li>
           -->
           <router-link 
             tag="li"
             v-for="item in movieList" 
             :key="item.id"
             :to=" '/detail/'+item.id  "   >
             {{item.name}}
             </router-link>
         </ul>
       </div>
   </template>
   
   <script>
   export default {
     name: '',
     data(){
       return {
         movieList:[
           {id:101, name:'第一滴血'},
           {id:102, name:'我不是药神'},
           {id:103, name:'让子弹飞'},
         ]
       }
     }
   }
   </script>
   

2. 创建业务组件 src/components/Detail.vue 展示电影详情，同时接收电影参数：

   <template>
       <div>电影详情展示-----{{$route.params.id}}</div>
   </template>
   
   <script>
   export default {
     // 组件实例内部获得"路由参数"，进而可以通过axios获得指定信息的详情内容
     name: 'Detail',
     created(){
       console.log(this) // VueComponent 组件对象
       console.log(this.$route.params.id) // 获得名称为id的路由参数
     }
   }
   </script>
   

3. 在main.js中 给 Movie.vue 和 Detail.vue 两个组件创建路由，Detail的路由要设置参数：

   // 1. 导入各个业务组件
   import Movie from './components/Movie.vue'
   import Detail from './components/Detail.vue'
   
   // 2. 注册路由中的相关组件
   //    路由中有两个组件( <router-link>  <router-view> )被进场使用
   // A. 单独注册
   // Vue.component('router-link',XXX)
   // Vue.component('router-view',XXX)
   // B. 一并注册，一次性把所有的组件都注册好，更高效
   Vue.use(VueRouter) // 插件
   
   // 3. 创建一个路由对象
   const router = new VueRouter({
     // #锚点信息就是路由地址(路由地址不用设置#号，内部已经封装好了)
     // routes:固定名称，用于设置路由地址(#/xxx)与组件的对应关系
     routes:[
       {path:'/', redirect:'/movie'},
       {path:'/movie', component:Movie}, // 电影列表路由
       // 给当前路由设置参数
       // path:'/xxx/:a/:b:c'
       // 通过:冒号方式表达有参数，a/b/c 是参数的名称，可以自定义为其他
       {path:'/detail/:id', component:Detail}, // 电影详情路由
     ]
   })
   

4. App.vue中保留router-view。

   <template>
       <div>
         <h2>App根组件-路由传参</h2>
         <p id="cont">
           <!-- 设置业务组件显示-路由组件实现代表占位符 -->
           <router-view></router-view>
         </p>
       </div>
   </template>
   

注意：

1. 路由有参数，那么应用中要传递该参数。
2. router-link 标签默认被编译为超链接a标签，可以设置tag属性，使其变为其他标签。