标签:router return exp 修改 get layer case update out
在components文件夹中新建一个.vue文件
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default{
name:‘player‘,
data(){
return {
msg:{}
}
},
mounted(){
this.msg=this.getPlayer(this.$route.params.uid);
},
beforeRouteUpdate(to,from,next){
this.msg=this.getPlayer(to.params.uid);
next();
},
methods:{
getPlayer(uid){
switch (uid) {
case ‘1‘:
return {id:1,name:‘哈登‘};
break;
case ‘2‘:
return {id:2,name:‘姚明‘};
break;
default:
return {id:-1};
// statements_def
break;
}
}
}
}
</script>
修改App.vue,增加组件链接<router-link to=‘‘></router-link>
修改router文件夹中的index.js文件 导入组件 import,设置路由
import Vue from ‘vue‘ import Router from ‘vue-router‘ import HelloWorld from ‘@/components/HelloWorld‘ import player from ‘@/components/player‘ Vue.use(Router) export default new Router({ routes: [ { path: ‘/‘, name: ‘HelloWorld‘, component: HelloWorld },{ path:‘/player/:uid‘, name:‘player‘, component:player } ] })
标签:router return exp 修改 get layer case update out
原文地址:https://www.cnblogs.com/m-yk/p/9797665.html