小白参与vue开发已有大半年的时间，虽说开发过程中完成功能模块基本没有问题，但是对于项目页面渲染和路由跳转了解的很模糊，尤其是对于index.html、main.js、App.vue、index.js这四个文件的相互关系认识的比较模糊，上网看了很多的资料，感觉都没能让我茅塞顿开，所以自己由一个demo来了解一下这四个文件的相互关系。
首先给出有网上看到的关于这四个文件的基本的功能描述：
index.html
vue是单页界面，主窗口通过index.html渲染，默认的http://localhost:8080会去加载index.html。
main.js
main.js是我们的入口文件，主要作用是初始化vue实例，并引入所需要的插件，会用App.vue替换index.html中的id='app'的div。
App.vue
App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。
index.js
vue路由会去监听url变化，通过路由配合找到相应组件，加载到<router-view>上，实现页面切换。
1.初识index.html、main.js、App.vue、index.js
使用vue-cli生成vue初始项目之后，index.html、main.js、App.vue、index.js这四个文件的内容大概如下（这里只是给出了我这篇文章关注的内容，还有其他的内容，需要用到的插件之类的）：
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>first-vue</title>
</head>
<body>
<div id="app" class="testindex">
</div>
<!-- built files will be auto injected -->
</body>
</html>
//main.js
new Vue({
el: '#app',
router,
//在根实例中声明这个store,就可以在其它子组件中使用
store,
// 声明模版
template: '<App/>',
// 注册成组件
components: { App }
})
<!--App.vue-->
<template>
<div id="app" class="testapp">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
//index.js
export default [
{
path: '/index',
name: 'HelloWorld',
component: HelloWorld
}
]
<!--Helloword.vue-->
<template>
<div class="hello">
<h1>HelloWord!</h1>
</div>
</template>
在上面这种情况下，index.html、main.js、App.vue、index.js四个文件的相互关系是：
（1）主窗口通过index.html渲染
（2） 入口文件 main.js，创建vue实例，挂载到index.html的id="app"上面，由于vue实例中的template属性的存在template: '<App/>'、components: { App }，导致index.html中的id="app"的div会被该组件取代。
（3）App.vue是我们的子组件，所有的页面都是在App.vue下进行切换的，其中的<router-view/>就是用来承载路由组件的。
（4）路由文件index.js，由于在vue实例中已经注册了router，就是在根实例中监听路由变化，找到相应的组件，加载到App.vue中的<router-view/>上进而实现页面切换。
渲染后的elements.png
2.再识index.html、main.js、App.vue、index.js
这里我们稍稍改变一下index.js这个路由文件如下：
//index.js
export default [
{
path: "/",
name: "app",
component: App,
children: [
{
path: '/index',
name: 'HelloWorld',
component: HelloWorld
}
]
}
]
再看页面渲染之后的elements结构：
路由变更之后渲染的elements.png
对比路由文件变化前后渲染的elements结构可以发现，在路有中将app.vue作为根路由的话，会将其作为路由组件进行渲染，由于在main.js中已经由<tempalte>元素将App.vue引入到index.html之中作为主组件渲染，最终导致App.vue这个组件渲染了两次。
若想要在路由文件中将App.vue作为根组件声明，那么可以先思考一下应该如何修改这几个文件。
step1:
此时由于在main.js中已经由tempalte属性将App.vue引入到index.html之中作为主组件渲染，最终导致App.vue这个组件渲染了两次，我们考虑修改main.js如下：
//main.js
new Vue({
el: '#app',
router,
//在根实例中声明这个store,就可以在其它子组件中使用
store
// 声明模版
//template: '<App/>',
// 注册成组件
//components: { App }
})
将template和components注释，这样想来应该不会再重复渲染了，看一下渲染后的元素结构：
路由变更后的优化01.png
查看结果发现此时页面虽然index.html中的id="app"这个div没有被app.vue取代，但是以此同时也没有成功的加载路由组件。仔细一想不难知道原因，此时不论是app.vue还是HelloWord.vue都是路由组件，路由组件需要<router-view/>来承载，现在HelloWord.vue可以由App.vue中的<router-view/>来承载，App.vue没有地方可以承载，所以导致无法加载。
step2.
于是我们修改index.html如下：
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>first-vue</title>
</head>
<body>
<div id="app" class="testindex">
<!--新增承载路由组件的标签-->
<router-view></router-view>
</div>
<!-- built files will be auto injected -->
</body>
</html>
新增承载App.vue这个路由组件的标签之后，查看一下元素结构此时变为：
路由变更后的优化02.png
3.总结
通过上面简单的示例我相信你可以对index.html、main.js、App.vue、index.js这四个文件的相互关系有了比较清晰的认识，当然里面还有很多的细节知识需要我们去深挖，后面会继续与大家分享，有设么不对的地方，欢迎大家指出。
网友评论