[新手]vue-cli项目问题

发布于 2022-09-11 23:56:02 字数 3639 浏览 24 评论 0

报错如下
报错信息:
image.png
文件结构
image.png

components->header.vue

<template>
  <header class="content clearfix">
    <div class="left">
      <img :src="logo_src" alt="logo图">
    </div>
    <div class="right">
      <div class="nav-top">
        <span class="zh_click" @click="zh_tran('s')" id="zh_click_s">简</span>
      </div>
      <div class="nav-bt">
        <ul class="clearfix father-ul">
          <li v-for="item in navs">
            <router-link :to="item.href" :class="{current:item.cur}" v-text="item.content"></router-link>
            <div class="drop-div" v-if="!!item.child">
              <span class="trangle"></span>
              <ul class="child-ul">
                <li v-for="item_child in item.child">
                  <router-link :to="item_child.href">{{item_child.content}}</router-link>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>
<script>
  export default {
    name: 'Header',
    data() {
      return {
        logo_src: '../assets/img/logo.png',
        navs: [{
            content: '首页',
            href: state.page_src.index_src,
            cur: true,
            child: null
          },
          {
            content: '首页2',
            href: state.page_src.company_src,
            cur: false,
            child: [{
              content: '2-1',
              href: state.page_src.introduce_src,
            }, {
              content: '2-2',
              href: state.page_src.charge_src,
            }]
          },
          {
            content: '首页3',
            href: state.page_src.about_src,
            cur: false,
            child: null
          }
        ]
      }
    }
  }

</script>
<style lang="css">

</style>

pages->index.vue

<template>
  <div id="wrap">
    <header-menu></header-menu>
  </div>
</template>
<script>
  import headerMenu from '../components/header'
  export default {
    data() {
      return {

      }
    },
    components: {
      headerMenu
    }
  }

</script>

router->index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../pages/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      // name: 'HelloWorld',
      component: resolve => require(['../pages/index'], resolve),
      meta: {
        title: 'index'
      }
    },
    {
      path: '/index',
      component: Index
    },

  ]
})

store->index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
    page_src: {
        index_src: './index',
        introduce_src: '/introduce',
        about_src: './about',
    }
}

export default new Vuex.Store({
    state
})

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>test</title>
</head>

<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <!-- built files will be auto injected -->
</body>

</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

我不是你的备胎 2022-09-18 23:56:02

header.vue里面的state没有定义

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文