阅读 365

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

vue-cli 基础知识快速导览

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

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

看下app.vue 代码

<!-- https://juejin.im/post/5e3238745188252c32253482

可以去我这个项目里 实际查看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之类的,但是在实际的开发中,我们遇到更多的可能是 点击一个按钮 然后根据当前页面的某些参数的状态 来决定跳到哪个页面。 也就是说 跳转的逻辑 不是写死的,而是一个动态的。

关注下面的标签,发现更多相似文章
评论