当其中一条路线中的模板引用相同的 ID 时，Vue-Routes 无法正常工作

Question

我正在使用 Vue-routes 开发 Vue 应用程序。其中一条路线有一个功能，旨在通过在各自的输入字段中写入所需的颜色来更改两个 div 的背景颜色。但是有两个问题。路由器不工作，因为我写了这个变色功能，变色也不起作用。所以这基本上是 "fail-fail" 的情况。我在 Google 检查中从控制台收到此消息："vue.js:597 [Vue warn]: Cannot find element: #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 中，您有新的 Vue()。这将创建一个新的 Vue 实例。您可能正在寻找的是创建一个新的 component.

对于组件，您不需要使用 el 定义将其安装在何处，而 Vue 路由器会处理它。在你的 Vue 应用程序中，你应该只定义一次 el，那是 Vue 实例自己挂载的地方。在 Vue 实例自行挂载后，路由发生在 Vue 内部。

当其中一条路线中的模板引用相同的 ID 时，Vue-Routes 无法正常工作

Vue-Routes is not functioning when a template in one of the routes is referring to the same ID

javascript

vue.js

vue-router