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

Posted 2023-02-22

【中文标题】Vue v3 应用程序不使用 vue-router@4 渲染组件

【英文标题】：Vue v3 app does not render components with 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>？

【参考方案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>