vue-router路由

Posted 2021-01-13 m-yk

在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
    }
  ]
})