Question

我正在使用Vue-routes开发Vue应用程序。其中一条路线具有一个功能，即通过在相应的输入字段中写入所需颜色来更改两个div的背景颜色。但是有两个问题。由于我编写了这种换色功能，因此路由器无法工作，颜色变化也不起作用。所以它基本上是一个“失败 - 失败”的情况。我在Google检查中从控制台收到此消息：“vue.js：597 [Vue警告]：找不到元素：#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不起作用

1 个答案: