Vue-router：我需要为 Vue-router 定义默认路由吗

Question

使用 vue-router 进行实验，当我点击 <router-link to="/about">Go to About</router-link> 时，它不会将我重定向到任何地方，例如：如果我在 localhost:8080/#/ 上并且我点击 Go to About 按钮，我仍然保持在 localhost:8080/#/ 上。此外，如果我将 url 直接更改为 localhost:8080/#/about，则不会发生任何事情（即网站没有变化，就好像我仍在 localhost:8080/#/ 上一样）

代码：

/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/about',
    component: () => {
      import ('../views/About.vue');
    }
  }
]

const router = new VueRouter({
  routes
})

export default router;

./App.vue

<template>
   <div>
      <div id='nav'>
        <router-link to="/about">Go to Foo</router-link>
      </div>
      <router-view></router-view>
   </div>
</template>
<script>
export default {
  name: 'App',

  components: {
    //
  },

  data: () => ({
    //
  }),
};
</script>

./views/About.vue

<template>
  <p>Testing out vue-routes</p>
</template>

./main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import store from './store';
import router from './router';

Vue.config.productionTip = false;


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

我尝试运行以下代码。它没有给出服务错误。 （我也在使用 vuetify 和 vuex 但我不认为这是问题所在？）

---

编辑

我已经编辑了代码，使其通过创建另一个 vue 应用程序并使用 vue 提供的默认值来工作，但我似乎无法理解为什么编辑后的代码可以工作以及为什么上面的代码 ^^ 没有。原因似乎是默认的localhost:8080/#/ 也需要在./App.vue 中有自己的路由，默认情况下不存在吗？有人可以证实这一点（似乎无法在网上找到类似的解释吗？）

修改后的工作代码：

./App.vue

<template>
  <div id="app">
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</div>
</template>

./views/Home.vue

<template>
<h1>This is the home page</h1>
</template>
<script>
export default {
  name: 'Home',

  components: {
    //
  },

  data: () => ({
    //
  }),
};
</script>

./main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import store from './store';
import router from './router';

Vue.config.productionTip = false;


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

./router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import Home from "../views/Home.vue";

Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import("../views/About.vue")
  }
];

const router = new VueRouter({
  routes
})

export default router;

./views/About.vue

<template>
  <p>Testing out vue-routes</p>
</template>

Answer 1

您需要有一个 <router-view/> 来解析路由。

您可以在此处阅读更多信息：documentation