一、Vue-Cli2

1.1runtime-compiler和runtime-only

  • runtime-compiler：template->ast->render->vdom->ui
  • runtime-only:render->vdom->ui 性能高，代碼量少

二、Vue-Cli3

2.1認(rèn)識Vue CLI3

vue-cli 3 與 2 版本有很大區(qū)別

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 還是 webapck 3
vue-cli 3 的設(shè)計原則是“0配置”，移除的配置文件根目錄下的，build和config等目錄
vue-cli 3 提供了 vue ui 命令，提供了可視化配置，更加人性化
移除了static文件夾，新增了public文件夾，并且index.html移動到public中

三、Vue-router

3.1認(rèn)識路由

  • 后端渲染（jsp）：服務(wù)器直接生產(chǎn)渲染好對應(yīng)的HTML頁面, 返回給客戶端進(jìn)行展示
  • 后端路由：當(dāng)我們頁面中需要請求不同的路徑內(nèi)容時, 交給服務(wù)器來進(jìn)行處理, 服務(wù)器渲染好整個頁面, 并且將頁面返回給客戶頓
  • 前端渲染：后端只提供API來返回數(shù)據(jù) ,前端通過Ajax獲取數(shù)據(jù), 并且可以通過JavaScript將數(shù)據(jù)渲染到頁面中
  • 前端路由：改變URL，但是頁面不進(jìn)行整體的刷新，一個URL對應(yīng)一個組件在頁面上渲染

3.2前端路由的規(guī)則

  • URL的hash：通過直接賦值location.hash來改變href, 但是頁面不發(fā)生刷新

  • HTML5的history模式：

    • history.pushState({},'','/foo')

    • history.replaceState({},'','/foo')

    • history.back()

    • history.forward()

    • history.go(-1)等價于history.back()

      history.go(1)等價于history.forward()

3.3Vue-router基礎(chǔ)

  • 使用vue-router的步驟:

    • 第一步: 創(chuàng)建路由組件

      <template>
  <div>
    <h2>我是關(guān)于</h2>
    <p>哈哈哈</p>
  </div>
</template>

<script>
  export default {
    name: "About"
  }
</script>

<style scoped>

</style>

    • 第二步: 配置路由映射: 組件和路徑映射關(guān)系

      /*配置路由相關(guān)的信息*/
import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'
//1.通過Vue.use（插件），安裝插件
Vue.use(VueRouter);

//2.創(chuàng)建路由對象
const router = new VueRouter({
  //配置路由和組件之間的關(guān)系
  routes: [
    {
      path:'/home',
      component:Home
    }, {
      path:'/about',
      component:About
    }
  ]
});
//3.將router對象傳入vue實例中
export default router;

    • 第三步: 使用路由: 通過router-link和router-view

      <template>
  <div id="app">
    <router-link to="/home">首頁</router-link>
    <router-link to="/about">關(guān)于</router-link>
    <router-view></router-view>
  </div>
</template>

router-link: 該標(biāo)簽是一個vue-router中已經(jīng)內(nèi)置的組件, 它會被渲染成一個a標(biāo)簽.

router-view: 該標(biāo)簽會根據(jù)當(dāng)前的路徑, 動態(tài)渲染出不同的組件.

3.4細(xì)節(jié)處理

  • redirect

    默認(rèn)情況下, 進(jìn)入網(wǎng)站的首頁, 我們希望router-view渲染首頁的內(nèi)容.但是我們的實現(xiàn)中,默認(rèn)沒有顯示首頁組件, 必須讓用戶點擊才可以.解決辦法

    {
      path:'',
      redirect:'/home'
    }
/*我們在routes中又配置了一個映射. 
path配置的是根路徑: /
redirect是重定向, 也就是我們將根路徑重定向到/home的路徑下, 這樣就可以得到我們想要的結(jié)果了.
*/

  • history

    改變路徑的方式有兩種:URL的hash,HTML5的history,默認(rèn)情況下, 路徑的改變使用的URL的hash.如果希望使用HTML5的history模式

    const router = new VueRouter({
  routes: [
    ...
  ],
  mode:'history'//=>路徑的改變方式
});

  • router-link補充

to, 用于指定跳轉(zhuǎn)的路徑.
tag可以指定router-link之后渲染成什么標(biāo)簽
replace不會留下history記錄, 所以指定replace的情況下, 后退鍵返回不能返回到上一個頁面中
active-class: 當(dāng)router-link對應(yīng)的路由匹配成功時, 會自動給當(dāng)前元素設(shè)置一個router-link-active的class，也可以在路由對象中添加默認(rèn)的linkActiveClass屬性

  • 路由代碼跳轉(zhuǎn)

    有時候, 頁面的跳轉(zhuǎn)可能需要執(zhí)行對應(yīng)的JavaScript代碼, 這個時候, 就可以使用第二種跳轉(zhuǎn)方式了

<div id="app">
    ...
<button @click="homeClick">首頁</button>
    <button @click="aboutClick">關(guān)于</button>
...
<script>
export default {
  name: 'App',
  methods:{
    homeClick(){
      this.$router.replace('/home');
    },
    aboutClick(){
      this.$router.replace('/about');
    }
  }
}
</script>