添加第二条路由时遇到困难
添加第二条路由时遇到困难
提问于 2021-01-07 21:39:41
所以我是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>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-07 21:49:03
默认情况下，您正在使用散列模式，该模式允许访问以# sign为前缀的路由：
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
}
]
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65613427
复制相关文章
相似问题
腾讯云开发者
