vue-cli 基础知识快速导览

看一下vue-cli的基本项目结构。其实有了webpack的基础，已经可以快速阅读vue-cli的基本结构了。所以这里不再做重复性讲解和深入分析。我们的主要目的是快速上手项目。

这里稍微讲解一下大概的目录结构是用来干嘛的。

看下app.vue 代码

<!-- https://juejin.cn/post/1

可以去我这个项目里 实际查看template的 用法和简介

-->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<!--  绝大多数vue代码 都是写在这个标签里面  -->
<script>
//其实就是导出的标识，这个跟vue其实关系不大了 是webpack提供的 代码分模块的写法
//可以看一下 main.js里面也是这样 import app 来达到引用代码的目的的
export default {
  name: 'App'
}
</script>


<!-- 这里 style如果这么写 那么这些属性 是全局生效的
要加scoped标签 才可以限制属性 在当前页面生效-->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

总结一下：

vue的项目基本编写规则就是一个template 一个scrpit 一个style 配上对应的路由即可。

快速理解vue-router

这个东西其实和android里面的路由概念有一点点像。在android里面也是有类似的机制给定一个deeplink 然后跳转到对应的activity。 vue-router也是一样。只不过 vue-router跳转的都是单页应用。而不是像android那样的跳不一样的activity， vue-router的跳转更像是android里面一个activity切换不同的fragment。

快速开始一个vue-router 路由

首先新建一个Hi.vue 文件（一个vue文件就代表一个页面，你可以理解成android里面的fragment）.注意 vue文件的三要素.

然后在index.js 这边注册一下我们的页面和对应的路由地址

到这里，我们在浏览器就可以直接访问到我们这个页面了

有人要问了，这icon哪来的，我在Hi.vue里面并没有写icon啊

我们将注释掉的代码放开即可看到类似超链接的效果了。这就是一个极简的vue的 SAP（单页面）应用了

子路由

子路由也不难理解。比如上面有一个hi页面，我们还想在这个hi页面里面也搞一套路由，那这个东西就叫子路由了。子路由所指向的页面都是隶属于父页面的一部分的

新建一个hi1.vue 页面

<template>
  <div class="dv1">
    <h2>{{msg}}</h2>
  </div>
</template>

<script>
export default {
  name: "hi1",
  data() {
    return {
      msg: "I am Hi1 page！！！！！"
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.dv1 {
  background-color: brown;
  width: 300px;
  display: table;
  margin: 0 auto;
  
}
</style>

然后在index里面加入这个子路由

然后在我们的父页面也就是hi.vue 上把他包进去

最后我们看一下效果

路由之间的参数传递 ---- name 传参

眼尖的同学已经看到上面还有一个name的键值对。其实这个name 就是用来做参数传递的一种方法。

直接取一下这个值就可以

然后就可以在页面上看到这个传递的值了

这里要注意如果是子路由的参数传递写法有一些不同：

但这种参数传递的方法我感觉并没有什么卵用。大家看看就好。实际意义我觉得不是很大。

路由之间的参数传递 ---- :to 传参

看下传参

接受参数

最后看下效果：

单页面多路由区域操作

这个其实不难理解，上面的例子我们只有一个router-view。实际开发中我们常见的是一个页面被分为各种区域，每个区域都是一个router-view。这样的话方便我们将一个个大的任务分解为一个个小的任务。多人协作起来更有优势，且代码可维护性更好。

例如：

可以看下这个ui 效果，左边是一个组件，右边也是一个组件。我们将这2个组件放到不一样的vue文件中就实现了对一个page 进行组件分割的效果。

这种实现方式在实际开发任务中更为常见。下面就按照图中所示，我们来实现一下。

首先定义一下对应的2个routerview

然后我们来实现一下对应的2个routerview的效果

最终我们要去index.js 注册一下这2个路由

利用url 来传递参数（锚点）

先看一下在路由中怎么传值

实际传值

最后看看接收参数

<template>
  <div>
    <h2>{{msg}}</h2>
    <p>id:{{$route.params.newsId}} --------title:{{$route.params.newsTitle}}</p>
  </div>
</template>

<script>
export default {
  name: "params",
  data() {
    return {
      msg: " params page"
    };
  }
};
</script>

vue 中的重定向与 alias别名

routes: [
    {
      
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    },{
      path:'/params/:newsId/:newsTitle',
      component:Params
    },{
      path:'/goHome',
      redirect:'/'
    }
  ]

比如这里你link到goHome 因为配置了redirect 所以会直接去 helloworld组件了。

与之类似的还有一个叫alias的东西，别名。他与这里的redirect区别就是重定向的时候浏览器的url最终展示的是一样的。而alias 在浏览器中展示的url 与正常的是不一样的。

虽然两者最后的效果都是一致的。

这里大家有兴趣可以自己动手看看。我个人觉得这个东西在开发中意义可能不是很大。

vue 页面跳转动画

这里就把他理解成 android里面页面切换时的动画就可以了。我这里演示的只是最简单的那种。如果要做的酷炫需要css和js的动画功底，这里就不再深入了。

首先就是需要动画的地方要用trans标签包裹起来

 <transition name="fade"  mode="out-in">
      <router-view />
    </transition>

然后就是定义一下对应的动画css 即可。

.fade-enter{
  opacity: 0;
}
.fade-enter-active{
  transition: opacity .5s;
}
.fade-leave{
  opacity: 1;
}
.fade-leave-active{
  opacity: 0 ;
  transition: opacity .5s;
}

这里就不再演示实际的动画效果了，有兴趣的可以自行搜索vue 动画。

mode和404

现在我们的url 都是带# 的

如果修改了index.js的配置文件

再看

另外再配置一下统一的404页面

 routes: [
    {
      
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    },{
      path:'/params/:newsId/:newsTitle',
      component:Params
    },{
      path:'/goHome',
      redirect:'/'
    },{
      path:'*',
      component:Error
    }
  ]

注意看最后一行 path的写法。

这里的Error 就是一个普通的vue文件。这里就不去写了。大家可以随意发挥。当然ngin也可以配置相关的404 信息。

vue 路由中的勾子函数

钩子函数的概念就不过多介绍了，稍微有开发经验的都知道这是啥。

我们主要看一下，这里勾子函数的用法

export default new Router({
  mode: 'history',
  routes: [
    {

      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/params/:newsId/:newsTitle',
      component: Params,
      //主要看看这里to from 都是啥
      beforeEnter: (to, from, next) => {
        console.log(to)
        console.log(from)
        next()
      }
    }, {
      path: '/goHome',
      redirect: '/'
    }, {
      path: '*',
      component: Error
    }
  ]
})

next 函数不写的话就不会跳转了，或者你next (false) 也是不会跳转的。

当然next里面也可以跟一个实际的path。这个函数用的比较多。

实际上在这个勾子函数里面，可以做的事情不少，比如在这里判断一些参数来决定是否要跳转到对应的界面。

上面介绍了在index.js 路由文件里面增加勾子函数。下面介绍一种在模板里写勾子函数的方法

<script>
export default {
  name: "params",
  data() {
    return {
      msg: " params page"
    };
  },
  //切记写路由的时候 一定不要忘记写next函数调用 不然是不起作用的
  beforeRouteEnter (to, from, next) {
    console.log('ready to enter ')
    next()
  },
  beforeRouteLeave (to, from, next) {
    console.log('ready to leave')
    next()
  }
};
</script>

编程式导航

这个很好理解，前面介绍的路由跳转都是写死的，比如 routelink之类的，但是在实际的开发中，我们遇到更多的可能是点击一个按钮然后根据当前页面的某些参数的状态来决定跳到哪个页面。也就是说跳转的逻辑不是写死的，而是一个动态的。

大前端之路-vue-router 和 vue-cli 速览