带有组件标签的 VueJS 路由不起作用

VueJS routes with component tag not working

本文关键字：VueJS 路由 不起作用 标签 组件      更新时间：2023-09-26

每当我在组件/App.vue 的模板中使用 id 为 #app 的组件标记时，它都会返回以下错误：

// components/App.vue
<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png">
    <hello></hello>
    <a v-link="{ path: '/home' }">Go to Foo</a>
    <a v-link="{ path: '/about' }">Go to Bar</a>
    <p>
      Welcome to your Vue.js app!
    </p>
    <router-view></router-view>
  </div>
</template>

错误

[vue-router] <router-view> can only be used inside a router-enabled app.
[vue-router] v-link can only be used inside a router-enabled app.

但是，如果在没有组件的情况下这样做，而只是一个带有组件 id 的常规元素，它就可以正常工作。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VueJS Starter</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

有没有办法将路由器与Web组件一起使用？因为必须将它与元素 id 一起使用也不适用于 Chrome 中的 vue-devtools。

确保在

main.js文件中提供信息。

在那里，您应该正确导入和使用路由器，如下所示：

import VueRouter from 'vue-router';
...
Vue.use(VueRouter);
相关文章：