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实例内部都可以接收路由参数。
案例使用
电影列表展示详情应用。
步骤
:
-
创建业务组件 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>
-
创建业务组件 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>
-
在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}, // 电影详情路由 ] })
-
App.vue中保留router-view。
<template> <div> <h2>App根组件-路由传参</h2> <p id="cont"> <!-- 设置业务组件显示-路由组件实现代表占位符 --> <router-view></router-view> </p> </div> </template>
注意
:
- 路由有参数,那么应用中要传递该参数。
- router-link 标签默认被编译为超链接a标签,可以设置tag属性,使其变为其他标签。