javascript - 刚学习vue，使用vue-router创建路由时报错，请大神赐教

问题描述

问 题

html结构是这样的：

<div class="main" id="main">
        <div class="top"></div>
        <div class="body-box">
            <div class="left" id="left">
                
                <div class="menu-btn-box">
                    <span class="menu-btn" id="menu_btn"></span>
                </div>
                
                <tools-list></tools-list>
                
            </div>
          <div class="middle">
              <router-view></router-view>
          </div>
        </div>
    </div>

js代码是这样的：

    var tools_list_arr = [
        {
            title: '在线云盘',
            thisUrl: '/yunpan'
        },
        {
            title: '作业系统',
            thisUrl: '/zuoye',
            children: [
                {
                    title: '作业布置',
                    thisUrl: '/buzhi'
                },
                {
                    title: '作业评估',
                    thisUrl: '/pingu'
                },
                {
                    title: '作业查重',
                    thisUrl: '/chachong'
                },
            ]
        }
      ];
      
      Vue.component('tools-list',{
          template:'<ul class="tools-list" id="tools_list">\
                      <li v-for="item in items" class="tools-li">\
                        <router-link to="item.thisUrl">\
                          {{item.title}}\
                        </router-link>\
                        <ul class="tools-li-list">\
                          <li v-for="childItem in item.children" class="tools-li-list-li">\
                            <router-link to="childItem.thisUrl">\
                              {{childItem.title}}\
                            </router-link>\
                          </li>\
                        </ul>\
                      </li>\
                    </ul>',
          data: function(){
              return {
                  items: tools_list_arr
              };
          }
      })
      
      new Vue({
          el: '#left'
      })
      
    
      
      //路由
        const Home = {
            template: '<div>Home</div>'
        }
        const First = {
            template: '<div>First</div>'
        }
        
        const routes = [
            {path: '' , component: Home },
            {path: '/qiandao' , component: First },
        ]
        
        const router = new VueRouter({
            routes : routes
        })
        
        const main = new Vue({
            el: '#main',
            router,
            render: h => h(toolsList)  //vue官方文档没这句，但网上查好像得添加这句，但我不知道h（）的括号里写什么
        }).$mount('#main')

报错如下

解决方案

render
你已经添加了el选项了就不用再添加render了

这篇关于javascript - 刚学习vue，使用vue-router创建路由时报错，请大神赐教的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！