vue实现跳转接口push 转场动画示例
156 浏览量
2020-12-13
03:56:25
上传
评论
收藏 36KB PDF 举报
vue实现跳转接口实现跳转接口push 转场动画示例转场动画示例
1.index.js 配置子路由配置子路由children。。
import Vue from 'vue'
import Router from 'vue-router'
import SingerDetail from 'components/singer-detail/singer-detail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/recommend'
},
{
path: '/singer',
component: Singer,
//配置子路由,加一个参数children
children: [
{
//:id 以id为变量,传递一个参数,跳转到不同子路由
path: ':id',
component: SingerDetail
}
] },
{
path: '/search',
component: Search,
children: [
{
path: ':id',
component: SingerDetail
}
] }
] })
1.Singer
<template>
<div class='singer'>
<list-view @select='selectSinger'></list-view>
//需要用routeview承载子路由
<router-view></router-view>
</div>
</template>
<script>
import listView from '../components/listview'
export default{
methods:{
selectSinger(singer){
//vue编程式跳转接口push
this.$router.push({
path:'/singer/'+singer.id
})
}
},
components:{
listView
}
}
</script>
<style>
.singer{
}
</style>
评论0
最新资源