Javascript 仅显示基本路由的Vue路由器

我正在尝试使用vue路由器。但是，我遇到了一个问题，在看了很多文章和文档之后，我找不到解决方案

我已经读了几篇关于如何使用vue路由器的文章，但它们都不起作用

这是我的密码。 我制作了三个组件

Home

Login

HelloWorld

我走了三条路

这是密码

main.js：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
// import Home from './components/Home.vue';
import HelloWorld from './components/HelloWorld.vue';
import Login from './components/Login.vue';


Vue.use(VueRouter)

Vue.config.productionTip = false


const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  routes: [
    { path: '/hello', component: HelloWorld },
    { path: '/login', component: Login },
    { path: '/', component: App }
  ]
});


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

App.vue：

<template>
  <div id="app">
    <HelloWorld/>
    <Login />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Login from './components/Login.vue'

export default {
  name: 'app',
  components: {
    HelloWorld,
    Login
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

两条路线都不起作用。 每次，我都会通过更改URL来按enter键。基本路线（即

/

）始终显示

并显示App.vue组件

---

谢谢

你在app.vue中的模板不正确， 试试这个：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

请注意，

标记是呈现页面/组件的位置

---

此外，routes数组上的基本路由

/

不正确，

App

组件是根组件，它将作为其子组件保存其他页面/组件，因此

App

组件不能是路由之一。

看起来您只是缺少App.vue上的

标记<代码>将根据url呈现组件，因此您无需自己导入组件

试试这个：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

试着把你当前的第三条路线（/）作为第一条路线。真的，你救了我。。否则，我会被困在那里一辈子。谢谢：）@DahouBTW。知道我应该为路由设置哪个组件吗？

/

@abhigyanayak没问题：），所以

/

路由就像

index.html

或

index.php

如果你知道它们是什么，基本上它是你想在没有任何附加路径的情况下加载应用程序时看到/呈现的主要组件/页面，因此，您可以在那里选择您想要的内容。its

index.html

。所以必须放在那里？尽管

App.vue

@abhigyanayak No，但这只是使用静态网站时的一个例子。但您可以创建一个新组件（例如：

index.vue

）并将其设置为

/

路由，因此这将是您的登录页，让我们以域名

example.com

作为您的web应用程序域，因此，当访问者访问这个url时，无论你想向他们展示什么，都要将其放入

index.vue

文件中。

  "name": "test-vue-router",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<template>
  <div id="app">
    <router-view/>
  </div>
</template>