单页面应用（SPA）如何实现---流程细解

单页面，顾名思义，就是整个项目只有一个页面，但是可以展示不同的内容。那在vue中它是如何实现单页面的？

我先画一下它的流程路线，index.html----main.js---app.vue---router.js----xxx.vue,接下来我们具体跑一下这条路线。

1. 项目构建成功后，在public目录下有个index.html,这个页面就是整个项目唯一的页面，也是浏览器访问的唯一页面，我们先看一下它里面的内容：

<!--浏览器访问的唯一页面（单页面应用SPA）-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body style="margin: 0px; padding: 0px">
  <!--如果浏览器不支持scrip时，就展示这段话-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
   <!--这个APP被main.js里面的APP所代替-->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2. 其中核心就是 <div id="app"></div>，页面所有内容都在这个div中，那如何将内容放到这div中的呢？接下来就要引入main.js，也就是项目的唯一入口，我们先看一下它里面的内容：

/*项目的唯一入口，相当于main函数*/
import Vue from 'vue'
/*引入app.vue组件*/
import App from './App.vue'
import router from './router'
new Vue({
  router,
  store,
 /* APP就是要渲染的组件*/
  render: h => h(App)
 /* $mount('#app')：挂载到#APP这里（index。HTML里面）*/
}).$mount('#app')

srender: h => h(App)，是要渲染的APP.vue组件，

$mount('#app')是将app.vue组件挂载到index.html中

3.main.js相当于的中间件，用于连接index.html和app.vue,那么app.vue又是什么，接下来我们先看一下它里面的内容：

<template>
  <div id="app">
  <!--  <router-view/>相当于占位符，它对应到router里面的index。js
    当你的请求路径是哪个，它对应的就是哪个组件也就是哪个。vue文件-->
    <router-view/>
  </div>
</template>

4.里面这个div就是main.js中 import App from './App.vue'。main.js所渲染的也是就是这个div中的内容，但div中只有<router-view/>，那么他是什么意思呢？通俗一点来说，他就是一个占位符，它对应到router里面的index.js当你的请求路径是哪个，它对应的就是哪个组件，也就是哪个.vue文件,也就会展示不同的内容。那么router里面的index.js里面又有什么内容呢？

import Vue from 'vue'
import VueRouter from 'vue-router'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'
Vue.use(VueRouter)

const routes = [
  {
        path: '/test1',
        name: '一',
        component: Test1
      } ,
     {
        path: '/test2',
        name: '二',
        component: Test2
      }
]

const router = new VueRouter({
  routes
})

export default router

5.从代码可以看出，当我们在浏览的请求路径是 index.html/test1 时，就会加载Test1.vue这个组件，也就会展示它里面的内容。同样的，请求路径是 index.html/test2 时，就会加载Test2.vue这个组件.

那么Test1.vue这个组件里面的内容应该怎么写呢，其实很简单，我们先看一下：

<template>
    <div>test1</div>
</template>

<script>
    export default {
        name: "Test1",
        /*  data 用于定义属性*/
        /*用return的意思是只在当前组件有效
           不使用return包裹的数据会在项目的全局可见，会造成变量污染
          使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件
        * */
        data() {
            return {

}
        },
        /* methods 用于定义的函数，可以通过 return 来返回函数值。*/
        methods: {
            
        }
    }
</script>

<style scoped>

</style>

<!--组件的定义用.vue文件
包含三部分：template：定义HTML元素
            script：定义点击事件，数据的动态处理
             style：定义样式-->


至此，一个完整的线路就算走完了，是不是有点绕，感觉一层一层的，我们再来梳理一下。这次，我们反着来：
xx.vue组件--------router里面的index.html，引入.vue文件，并定义他们的请求路径。--------------app.vue，将<router-view/>替换成我们请求
路径的那个xx.vue组件------------main.js中引入app.vue,渲染它，并把他挂载到
index.html中-------------index.html，浏览器访问。

单页面应用（SPA）如何实现---流程细解

猜你喜欢