Javascript 添加第二条路线有困难

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

我已经添加了路由，导入了组件，但是每当我尝试访问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文件（它不完整，我只想先加载它）：

欢迎{{route.params.name}
const choices=[“石头”、“布”、“剪刀”]
导出默认值{
数据（）{
返回{
名称：'游戏'，
你的选择：空，
aiChoice:null，
你的分数是0，
aiScore:0，
}
},
方法：{
startPlay：功能（选项）{
这个。你的选择=选择；
this.aiChoice=choices[Math.floor（Math.random（）*choices.length）]；
这就是游戏性（）；
},
游戏性：函数（）{
if（this.yourChoice='Rock'&&this.aiChoice=='剪刀〕{
这个.yourScore++；
}
else if（this.yourChoice=='Paper'和this.aiChoice=='Rock'））{
这个.yourScore++；
}
else if（this.yourChoice=='剪刀'&&this.aiChoice=='Paper'）{
这个.yourScore++；
}
else if（this.yourChoice==this.aiChoice）{
控制台日志（“绘图”）；
}
否则{
这个.aiScore++；
} 
}
}
}

默认情况下，您使用的是哈希模式，允许访问前缀为

符号的路由：

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

---

默认情况下，您使用的是哈希模式，允许访问前缀为

#

符号的路由：

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

---

如何访问该url？@Boussadjrarahim如果在本地主机上运行，它看起来像“localhost:8080/game/bob”。你应该使用

路由器链接或
路由器转到新路由。推送（{path:'your route'}）
，检查这里你如何访问该url？如果在本地主机上运行，它看起来像@Boussadjrahim“localhost:8080/game/bob”。您应该使用
路由器链接或
路由器转到新路由。推送（{path:'your route'}）
，检查此处