vue项目分析--index.html+main.js+App.vue关系,前端路由的使用

main.js引入文件
https://www.cnblogs.com/chenleideblog/p/10484554.html
https://blog.youkuaiyun.com/bujiongdan/article/details/81416100

app.vue是一个根组件，main.js 是一个入口文件，index.html是项目入口
index.html有的时候放在public文件夹下

app.vue里实际上就是定义了一个可以操作的vue模板区域，export default实际上就是把这个根组件暴露出去的意思，也可以在里面定义一下组件的名字

main.js里从app.vue里引入app，从vue的js文件里引入vue，之后写new vue，el里是要操作的组件的id，组件里写App，就是app.vue这个根组件的意思

实际上，浏览器访问的第一个文件是index.html，里面有一个id为app的挂载点，之后vue的根实例挂载在上面

main.js里新建一个vue实例，里面使用el声明要挂载的对象的id
实例components: {App }注册了一个局部的组件–App，局部组件实际上是来自于app.vue，template: ''表示起模板是组件app.vue里的template里的内容

所以main.js这个文件就是先把App.vue引入为App对象，之后新建一个vue实例把App.vue作为一个组件注入到index.html里的id为app的元素里，使用app里的模板也就是template里的内容取代元素内容

所以实际上项目运行的时候，main.js是项目的入口文件，运行时通过它找到实例需要挂载的位置，一开始是显示挂载点的内容，之后立刻使用实例注入的组件里的模板的内容取代

main.js里一般会把路由传进去

new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
})

import Vue from 'vue'
import router from './router'
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

实例新建的时候传入router可以在子组件里找到路由单例，vue实例化的时候默认会把参数挂载自己身上，结合组件形成一个组件树，其他组件从跟组件找定点之后把路由挂到自己身上

render: h => h(App)

是ES6的写法，实际上是产生一个App元素，是如下内容的简写：

render: function (createElement) {
     return createElement(App);
}

createElement 是 Vue.js 里面的 函数，可以生成一个VNode节点，render函数得到这个节点之后，返回Vue.js的mount函数，渲染成真实DOM节点，挂载到根节点上
相当于

render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  }

ES6 的简化写法是

render: createElement => createElement(App)

可以使用h代替createElement，使用箭头函数进一步简化

render: h => h(App)

实际上和vue1.0里的

new Vue({
  el: '#app',
  template:'</App>'
  componets: {App}
})

这种组件挂载的方式是一样的

这样在页面里的使用方法是

<div id='app'>
  <app></app>
</div>

<router-view />组件的使用

开发的时候可能遇到，点击链接跳转到其他组件的情况，一般跳转到新的页面，如果不想跳转到新页面只是在当前页面切换显示的话就涉及到路由的嵌套，即子路由的使用

可能在导航组件里的三个标签对应的地址是不同的前端url，点击就会跳转到不同的组件，并且加上<router-view></router-view>这个标签是组件实际显示的区域
navbar.vue：

<template>
	<div class="navbar">
		<ul id="main">
			<li><router-link  to="/food" >商品</router-link></li>
			<li><router-link  to="/rating">评价</router-link></li>
			<li><router-link  to="/seller">商家</router-link></li>
 
		</ul>
		
            <!-- 路由匹配到的组件将显示在这里 -->
           <router-view></router-view>
	</div>
</template>

可以看到vue文件里router-link这种超链接确实非常方便

之后在index.vue引入navbar.vue：
直接在template里留一个<navbar></navbar>的元素，之后在script里

import navbar from '@/components/navbar'

import food from '@/components/food'

export default {
	name: 'HelloWorld',
	data() {
		return {
			
			msg:[]
		}
	},
 
	components: {
		navbar
		
	}

关于路由的配置实际上在index.js文件里

{
      path: '/',
      name: 'index',
      component: index,
      redirect:'/food',
      children:[
      
    {
      path: 'food',
      name: 'food',
      component: food
    },
    {
      path: 'seller',
      name: 'seller',
      component: seller
    },
    {
      path: 'rating',
      name: 'rating',
      component: rating
    }
      ]
    },

index.js里的意思是该js文件指向的组件是index.vue

path把路由重定向到/的根目录，redirect是在重定向渲染的路径（一般指向第二个对象里的path），为了方便redirect找到可能要写一下第二个对象，一般是卸载children里（比如一个页面多个标签url，可能有一个是页面开启就默认显示的，这就是redirect的意义）

component: resolve => require([’@/view/index.vue’], resolve) 与component: index区别

懒加载：component: resolve => require([’@/view/index.vue’], resolve)
用require这种方式引入的时候，会把组件打包成不同的js，加载的时候也是按需加载，只有访问到这个路由地址的时候才会加载这个js

非懒加载：component: index
使用import引入所以项目打包的时候路由里的所有组件都打包到一个js里，进入首页的时候会导致需要加载的内容过多，时间相对较长