javascript - 当其中一个路由中的模板引用相同 ID 时，Vue-Routes 无法运行

Question

我正在使用 Vue-routes 开发 Vue 应用程序。其中一条路线有一个功能，即通过在各自的输入字段中写入所需的颜色来更改两个 div 的背景颜色。但有两个问题。自从我编写了这个颜色更改功能以来，路由器就无法工作，而且颜色更改也不起作用。所以这基本上是一种“失败-失败”的情况。我在 Google 检查中从控制台收到此消息:“vue.js:597 [Vue warn]:找不到元素:#container”。

我确信这些问题是相互交织的，问题是我该如何解决它们？

HTML

<div id="container" v-bind:style="bga">
   <div class="top" v-bind:style="bgb">
      <div id="app">
         <h1 id="vueHead">Vue routing</h1>
         <h2 class="menu">
            <router-link to="/">Color</router-link>
            <router-link to="/main">Main</router-link>
         </h2>
      </div>
   </div>
   <!-- component matched by the route will render here -->
   <router-view></router-view>
</div>

index.js(路线)

import MainPage from '../components/mainPage.js'
import ColorPage from '../components/colorPage.js'

var urlend;

const routes = [
    {path: '/', component: ColorPage},
    {path: '/main', component: MainPage},
    ];
const router = new VueRouter({
    routes // short for `routes: routes`
});
var vm = new Vue({
    el: '#container',
    router
});

colorpage.js

const ColorPage = {
    template: `
<div id="middle">
    <label id="colorLabel"><h2> {{ info }} </h2></label>
    </br>
    <input type="text" class="colorInput" v-on:input="bga.backgroundColor = $event.target.value" placeholder="here...">
    </br>
    <input type="text" class="colorInput"  v-on:input="bgb.backgroundColor = $event.target.value" placeholder="... and here!">
</div>
`
};
var color = new Vue({
    el: '#container',
    data: {
        info: 'Change Colors By Typing Their Names:',
        bga: {
            backgroundColor: ''
        },
        bgb: {
            backgroundColor: ''
        }
    }
});

export default ColorPage

Answer 1

在 colorpage.js 中有 new Vue()。这将创建一个新的 Vue 实例。您可能正在寻找的是创建一个新的 component .

对于组件，您不需要使用 el 定义将其挂载的位置，而是由 Vue router 来处理。在你的 Vue 应用程序中，你应该只定义一次 el ，这就是 Vue 实例安装自身的地方。 Vue 实例自行安装后，路由将在 Vue 内部发生。