一、Vue-Cli2

1.1runtime-compiler和runtime-only

  • runtime-compiler:template->ast->render->vdom->ui
  • runtime-only:render->vdom->ui 性能高,代码量少

二、Vue-Cli3

2.1认识Vue CLI3

vue-cli 3 与 2 版本有很大区别

vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录
vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化
移除了static文件夹,新增了public文件夹,并且index.html移动到public中

三、Vue-router

3.1认识路由

  • 后端渲染(jsp):服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示
  • 后端路由:当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿
  • 前端渲染:后端只提供API来返回数据 ,前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中
  • 前端路由:改变URL,但是页面不进行整体的刷新,一个URL对应一个组件在页面上渲染

3.2前端路由的规则

  • URL的hash:通过直接赋值location.hash来改变href, 但是页面不发生刷新

  • 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基础

  • 使用vue-router的步骤:

    • 第一步: 创建路由组件

      <template>
        <div>
          <h2>我是关于</h2>
          <p>哈哈哈</p>
        </div>
      </template>
      
      <script>
        export default {
          name: "About"
        }
      </script>
      
      <style scoped>
      
      </style>
      
      
    • 第二步: 配置路由映射: 组件和路径映射关系

      /*配置路由相关的信息*/
      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.创建路由对象
      const router = new VueRouter({
        //配置路由和组件之间的关系
        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">关于</router-link>
          <router-view></router-view>
        </div>
      </template>
      

router-link: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个a标签.

router-view: 该标签会根据当前的路径, 动态渲染出不同的组件.

3.4细节处理

  • redirect

    默认情况下, 进入网站的首页, 我们希望router-view渲染首页的内容.但是我们的实现中,默认没有显示首页组件, 必须让用户点击才可以.解决办法

    {
          path:'',
          redirect:'/home'
        }
    /*我们在routes中又配置了一个映射. 
    path配置的是根路径: /
    redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了.
    */
    
  • history

    改变路径的方式有两种:URL的hash,HTML5的history,默认情况下, 路径的改变使用的URL的hash.如果希望使用HTML5的history模式

    const router = new VueRouter({
      routes: [
        ...
      ],
      mode:'history'//=>路径的改变方式
    });
    
  • router-link补充

to, 用于指定跳转的路径.
tag可以指定router-link之后渲染成什么标签
replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
active-class: 当router-link对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class,也可以在路由对象中添加默认的linkActiveClass属性

  • 路由代码跳转

    有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了

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