Question

每当我在components / 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。

Answer 1

请务必在main.js文件中提供相关信息。

你应该正确导入和使用路由器，如下所示：

import VueRouter from 'vue-router';
...
Vue.use(VueRouter);

组件标记不起作用的VueJS路由

1 个答案: