Vue项目结构及运行分析

1、index.html:

　　①index.html为vue项目默认首页，也就是说，浏览器访问项目，会首先访问index.html。

　　②在index.html中，一般只定义了一个id为app的div：<div id="app">来自index.html正文中的内容</div>。这是一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上。这个id将会连接到src/main.js内容。

　　③在index.html里面默认引用了app.vue根组件？

 

2、main.js:

　　①main.js为vue项目的入口文件，加载了各种公共组件(需要引用和初始化组件实例)。比如app.vue等。

new Vue({
  el: '#app',                                                                                                          
  //让vue知道我们的路由规则
  router,   //这是简写，等同于router:router，指向引入文件中的routes:[]。
  components: { App },
  template: '<App/>'
})

　　②在main.js中，new Vue新建了一个vue实例，

　　①使用el：#app链接到index.html中的app，官方解释为实例提供挂载的元素。此处为index.html中的<div id="app"><div>。

　　②使用template引入组件<app>和路由相关的内容。

　　③components：注册哪些组件，需在顶部引入文件。

　　④template：替换挂载元素的模板组件，而挂载元素的内容都将被忽略。即用template替换index.html里面的<div id="app"></div>

也就是说通过main.js关联到App.vue组件。

 

3、App.vue:

App.vue是我们的主组件，页面入口文件 ，所有页面都是在App.vue下进行切换的。也是整个项目的关键，app.vue负责构建定义及页面组件归集。

 

    在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。而index.html中的Title部分不会被取代，所以会一直保留。

 

4、router路径下的index.js：

内容主要包含引入相关资源以及初始化路由两部分

 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

 

路由的引用方式

1.router-link 标签

 <router-link to="/">返回path为/的路径</router-link>

2.方法中调用

this.$router.push('/');

路由地址中传参
1.<router-link v-if="ok" :to="{path:'/mainPage',query:{title:'首页',mcontent:'首页内容在此'}}"></router-link>
2.this.$router.push({path:'/mainPage',query:{title:'首页',mcontent:'首页内容在此'}});

接收参数

<h3>{{$route.query.title}}-{{$route.query.mcontent}}</h3>


我们继续看一下App.vue组件中的内容。在app.vue中，router-view标签会把路由内容渲染到这里。

<template>
  <div id="app">    
    <el-container>   
        <el-main>
          <router-view></router-view>
        </el-main>
    </el-container>
  </div>
</template>

<script> 
  import NavMenu from '@/components/NavMenu3'
  export default {
    name: 'App',
    components:{
      'navmenu':NavMenu,      
    }
  }
</script>

<style>
  .header{ }
</style>

 

 

当在构建 SPA (单页应用) 时，方便渲染你指定路由对应的组件。你可以 router-view 当做是一个容器，它渲染的组件是你使用 vue-router 指定的。

比如：

1.视图层：

<div id="app">
  <router-view></router-view>
</div>

2.路由定义：

router.map({
  '/foo': {
    // 路由匹配到/foo时，会渲染一个Foo组件
    component: Foo
  }
})

3.初始化实例:

// start app
var App = Vue.extend({})
router.start(App, '#app')

当你访问 /foo 时，router-view 就被 Foo 组件替换了