难以添加第二条路线

debugcn 发表于 Dev

全部债务

所以我是VueJ的新手，所以请原谅我在这里犯的任何错误。我有一个简单的前端应用程序，它的长度为两页。有索引路线和游戏路线。游戏路线采用路径变量名称，该名称应显示在屏幕上。

我已经添加了路由，导入了组件，但是每当我尝试访问URL时，它只会显示索引页面。有人知道我在做什么错吗？谢谢！

这是我的index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home'//index
import game from '@/components/game'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path:'/game/:name',
      name:'game',
      component:game
    }
  ]
})

这是我的game.vue文件（不完整，我只想先加载它）：

<template>
<div class="container-fluid m=0 p=0">
    <div id="theGame" class="full-page p-4">
    <div class="row">
        <h1>Welcome {{route.params.name}}</h1>
    </div>

    </div>
</div> 
</template>
<script>
const choices = ['Rock','Paper','Scissors']
export default {
    data(){
        return {
            name:'game',
            yourChoice: null,
            aiChoice:null,
            yourScore:0,
            aiScore:0,
        }
    },
    methods:{
        startPlay : function(choice){
            this.yourChoice=choice;
            this.aiChoice = choices[Math.floor(Math.random()*choices.length)];
            this.gamePlay();
        },
        gamePlay: function(){
            if(this.yourChoice=='Rock' && this.aiChoice=='Scissors'){
                this.yourScore++;
            }
            else if(this.yourChoice=='Paper' && this.aiChoice=='Rock'){
                this.yourScore++;
            }
            else if(this.yourChoice=='Scissors' && this.aiChoice=='Paper'){
                this.yourScore++;
            }
            else if(this.yourChoice==this.aiChoice){
                console.log("Draw");
            }
            else{
                this.aiScore++;
            } 
        }
    }
    
}
</script>
<style scoped>

</style>

布萨吉拉·卜拉欣（Boussadjra Brahim）

默认情况下，您使用的是哈希模式，该模式允许访问带#符号前缀的路由：

localhost:8080/#/game/bob

如果要像访问它一样localhost:8080/game/bob，应将历史记录模式添加到路由器定义中：

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path:'/game/:name',
      name:'game',
      component:game
    }
  ]
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。