码迷,mamicode.com
首页 > 其他好文 > 详细

vue-router路由

时间:2018-10-16 14:28:01      阅读:137      评论:0      收藏:0      [点我收藏+]

标签: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
    }
  ]
})

 

vue-router路由

标签:router   return   exp   修改   get   layer   case   update   out   

原文地址:https://www.cnblogs.com/m-yk/p/9797665.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!