Vue-Router

实现的基本原理是资源服务器中只有一个html页面一个css文件和一个js文件，当用户发出请求时，会将静态服务器上的全部资源下载下来，当用户访问指定的页面时会选择性地加载相应的页面（html.css.js文件），实现单页面富应用的技术支撑就是前端路由。说白了选择性地显示页面技术的实质就是组件化技术。

前端路由实际上是一种url和资源之间的映射关系，是建立在前后端分离基础之上的。

2、vue-router基本使用

2.1安装vue-router

步骤一:安装vue-router
npm install vue-router --save
步骤二:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)

第一步:导入路由对象，并且调用Vue.use(VueRouter)
第二步:创建路由实例，并且传入路由映射配置
第三步:在Vue实例中挂载创建的路由实例
使用脚手架的时候选择安装路由的话就不需要再安装路由了。

2.2搭建路由框架

2.3使用vue-router

2.3.1:创建路由组件

这里的路由组件实际上是功能模块，因为每个请求都对应一个功能组件。

2.3.2:配置路由映射:组件和路径映射关系

path表示url中含有’/home‘或者’/about‘才显示对应的组件。

2.3.3:使用路由:通过<router-link>和<router-view>

2.3.4</router-link>标签的补充

（1）tag属性: tag可以指定<router-link>之后渲染成什么组件，比代码会被渲染成一个<button>元素,而不是<a>

效果

（2）replace属性: replace不会留下history记录,所以指定replace的情况下，后退键返回不能返回到上一个页面中。

（3）active-class属性：当<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class,设置active-class可以修改默认的名称.
≥在进行高亮显示的导航菜单或者底部tabbar时，会使用到该类.
>但是通常不会修改类的属性,会直接使用默认的router-link-active即可.

2.4通过代码的方式修改路径

前面在使用<router-link>标签的时候可以做到点击链接或者是button会显示相应的组件，而且地址栏的路径会相应的改变。但是如果不使用<router-link>标签的话，如何实现上述功能呢？

2.5动态路由

2.5.1动态路由的使用

（1）编写路由组件

（2）配置路由组件和路由之间的关系

（3）使用路由组件

2.5.2动态路由扩展

需求：当点击“我的”时，会在该组件中显示路径中的信息。

2.6打包文件的结构

项目执行：npm run build 指令时会将项目打包。打包后生成dist文件如下：

2.7路由懒加载

2.7.1什么叫懒加载？

什么叫懒加载？用到时再加载。

路由懒加载的主要作用就是将路由对应的组件打泡成一个个的js代码块.只有在这个路由被访问到的时候,才加载对应的组件。

2.7.2懒加载的方式

项目打包后：

2.8路由的嵌套使用

比如在home页面中,我们希望通过/home/news和/home/message访问一些内容.一个路径映射一个组件，访问这两个路径也会分别渲染两个组件.

2.8.1实现嵌套路由的步骤

（1）创建对应的子组件，并在路由映射中配置对应的子路由。

（2）在组件内部使用<router-view/>标签。

3、vue-router参数传递

就是在路由跳转的时候需要参数传递。

3.1传递参数的类型

传递参数主要有两种类型: params和query

3.1.1params类型

配置路由格式: /router/:id

传递的方式:在path后面跟上对应的值

传递后形成的路径: /router/123,/router/abc

使用该方式传递参数，只能传递简单的参数。

3.1.2query的类型

配置路由格式:/router,也就是普通配置
传递的方式:对象中使用query的key作为传递方式

传递后形成的路径:/router?id=123,/router?id=abc

运行：

因为query传递的数据是对象类型，所以适合传递大量的参数。

3.1.3$router和$route的区别

3.2全局导航守卫（前置钩子函数）

学习链接:导航守卫 | Vue Router

所谓的导航守卫实际上是指，在URL来回跳转的时候做监听，以便当前URL跳转到其他URL时可以做一些其他的操作。

3.2.1三个生命周期函数

create()：在创建出组件之后回调该函数

mounted():当template挂载到DOM上的时候回调该函数

update()：当页面发生刷新的时候回调该函数

案例:

每次点击对应的URL时，网页上的标题会显示该URL对应的文字。

因为涉及到路由的跳转，因此需要在router下的index.html下写：

在实际开发中可以判断用户是否登录，登录的话跳转到下一个，没有登录的话跳转到next("/");

3.3全局导航守卫的补充

3.3.1全局后置钩子函数（router.afterEach）

在前面小节中使用的是全局前置钩子函数（router.beforeEach）来实现标签跟随URL的改变，但是还有一种就是后置钩子函数()

/*全局后置钩子函数*/
router.afterEach((to, from) => {
  document.title = to.matched[0].meta.title;
})

使用后置全局钩子函数不需要再调用next();方法。

3.3.2其他守卫

（1）路由独享守卫

学习链接：导航守卫 | Vue Router

（2）组件内守卫

学习链接：导航守卫 | Vue Router

4、keep-alive遇见vue-router

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配到的视图组件都会被缓存︰

这样的话在调用组件的之后就不用每次都创建了，也就是说组件在创建完成之后不会自动销毁，可以提升性能。

4.1keep-alive的两个属性

include -字符串或正则表达，只有匹配的组件会被缓存
exclude -字符串或正则表达式，任何匹配的组件都不会被缓存

这样User组件和profile组件在使用时会被创建，当切换到其他的组件的时候会被销毁，如此循环往复。

5、小案例TabBar

(1)在终端使用脚手架创建项目tabbar

PS D:\Vue\vue06-router> vue init webpack tabbar

(2)因为App.vue组件是浏览器DOM的实例，因此首先会想到直接在App.vue组件中定义。

效果：

上面的代码都是写在App.vue文件中的，但是存在代码复用性差的问题，而且缺少图片的问题，因此要将TabBar组件抽取出来。

也就是需要将App.vue中的关于TabBar的组件抽取出来，又因为组件想要在浏览器上显示需要将组件挂载到vue实例，也就是App.vue上因此需要将TabBar.vue导入到App.vue中注册，并在App.vue中使用。

效果还是一样的。

除了有文字还需要加上图标，图标去找阿里的就行：iconfont-阿里巴巴矢量图标库

效果:

但是，根据组件化的思想，TabBar组件只是负责底部的导航栏，而底部的四个图标实际上也是一个的组件，因此我们将放在导航条中的图标封装到1个组件中，在导航条中使用就行了。

根据上图，TabBarItem组件中的内容（也就是图标不是写死的，可以根据我们的需要方便进行相关的修改和添加）是个插槽，TabBar组件中也是插槽，因为图标的数量和内容是可修改的。

TabBar组件内容

<template>
  <div id="tab-bar">
    <slot></slot>
  </div>
</template>

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

<style scoped>
/*设置文字排列在一行上,设置TabBar背景颜色为浅灰色,并将TabBar放到下面,设置TabBar顶部的阴影*/
#tab-bar{
  display: flex;
  background-color: #f6f6f6;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 -1px 1px ,rgba(100,100,100,.2);
}
</style>

TabBarItem组件内容：

<template>
    <div class="tab-bar-item">
<!--  具名插槽    -->
     <slot name="item-icon"></slot>
      <slot name="item-txt"></slot>
    </div>
</template>
<script>
export default {
  name: "TabBarItem"
}
</script>

<style scoped>
.tab-bar-item{
  flex: 1;
  text-align: center;
  height: 49px;
}
.tab-bar-item img{
  width: 24px;
  height: 24px;
}
</style>

App组件内容：

<template>
  <div id="app">
    <!-- 3、使用组件TabBar和TabBarItem组件-->
    <tab-bar>
        <tab-bar-item>
          <img slot="item-icon" src="./assets/img/tabbar/首页.svg" alt="">
          <div slot="item-txt">首页</div>
        </tab-bar-item>
        <tab-bar-item>
          <img slot="item-icon" src="./assets/img/tabbar/分类.svg" alt="">
          <div slot="item-txt">分类</div>
        </tab-bar-item>
        <tab-bar-item>
          <img slot="item-icon" src="./assets/img/tabbar/购物车.svg" alt="">
          <div slot="item-txt">购物车</div>
        </tab-bar-item>
        <tab-bar-item>
          <img slot="item-icon" src="./assets/img/tabbar/我的.svg" alt="">
          <div slot="item-txt">我的</div>
        </tab-bar-item>
    </tab-bar>
  </div>
</template>
<script>

/*1、导入TabBar组件和TabBarItem组件注册到App.vue实例中并使用*/
import TabBar from "./components/tabbar/TabBar";
/*导入图标组件*/
import TabBarItem from "./components/tabbar/TabBarItem";

export default {
  name: 'App',
  components: {
    /*2、注册*/
    TabBar,
    TabBarItem
  }
}
</script>
<style>
/*引入css样式*/
@import "./assets/css/base.css";
</style>

张小猿ε٩(๑> ₃ <)۶ з

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue-Router

1、认识路由1.1什么是路由？路由( routing )就是通过互联的网络把信息从源地址传输到目的地址的活动.---维基百科路由提供了两种机制：路由和转送。（1）路由是决定数据包从来源到目的地的路径。（2）转送将输入端的数据转移到合适的输出端。路由器中的路由表决定了数据包的指向。1.2前端渲染和后端渲染1.2.1网页的发展历史（1）后端渲染阶段：jsp是html+css+java的组合，用户请求服务端的数据的时候会将数据和html和css组合成网页，将该网页传递到前端浏
复制链接

扫一扫