Vue v3 应用程序不使用 vue-router@4 渲染组件答案

【问题标题】：Vue v3 app does not render components with vue-router@4Vue v3 应用程序不使用 vue-router@4 渲染组件
【发布时间】：2021-07-28 14:15:09
【问题描述】：

我的 Vue v3 应用程序不会使用 vue-router@4 渲染组件，并且 DOM 上不会显示任何内容，并且 http://localhost:8080/view 不会显示与 /view 路径对应的组件中的任何内容。请指导我。

我用 Vue CLI 创建了这个项目，然后我安装了 npm install vue-router，基本上我只是在 ./components/users 中添加了一个新组件并修改了 main.js 文件，仅此而已。

import AppView from "../AppView";
import AppRegister from "../AppRegister";
import { createRouter, createWebHistory,createMemoryHistory  } from 'vue-router'

const routes = [
    {
        path: '/view',
        name: 'view',
        component: AppView
    },
    {
        path: '/register',
        name: 'register',
        component: AppRegister
    }
]

// let history = isServer ? createMemoryHistory() : createWebHistory()

const router = createRouter({
    history:createWebHistory(),
    routes: routes,
    linkActiveClass: 'active'
  })

export default router;

import {createApp} from 'vue'
import App from './App.vue'
import router from './router/router.js'
import VueRouter from 'vue-router'

createApp(App).use(VueRouter).use(router).mount('#app')

<script>
import AppView from "./AppView.vue";
import AppRegister from "./AppRegister.vue";

export default {
  name: "App",
  components: {
    AppView,
    AppRegister
  },
  data() {
    return {};
  },
  beforeCreate() {
    console.log('beforeCreating...');
    console.log(this.$route.query.mode);
    this.$router.push('/view');
    
    // if(typeof this.$route.query.mode !== 'undefined') {
    //   const redirectPath = this.$route.query.mode || "/";
    //   console.log("redirectPath : " + redirectPath);
    // }
  },
  created() {
    console.log('creating...');
  },

  mounted() {
    console.log('mounting...');
  }
  
};
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "B Titr", sans-serif;
  background-image: url("./assets/Suggestion.png");
  background-repeat: no-repeat;
  direction: rtl;
}

.container {
  max-width: 1000px;
  margin: 30px auto;
  overflow: auto;
  min-height: 300px;
  border: 1px solid steelblue;
  padding: 30px;
  border-radius: 5px;
}

.btn {
  display: inline-block;
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-family: inherit;
}

.btn:focus {
  outline: none;
}

.btn:active {
  transform: scale(0.98);
}

.btn-block {
  display: block;
  width: 100%;
}
</style>

【问题讨论】：

请在每个脚本上添加描述，哪个文件是哪个脚本。你能否在你的 app.vue 中包含<template></template>？

标签： vue.js vue-router

【解决方案1】：

在main.js中，你不需要.use(VueRouter)，因为插件初始化已经被导入的router实例覆盖了：

import router from './router/router.js'
import VueRouter from 'vue-router'

createApp(App).use(VueRouter).use(router).mount('#app') ❌
              ^^^^^^^^^^^^^^^

createApp(App).use(router).mount('#app') ✅

并确保在您的根组件中有一个router-view（例如，App.vue）：

<template>
  <router-view />
</template>

【讨论】：