Vue-router基本学习（1）

IamDLY 发布于2019-08-26 13:30 / 2234人阅读

摘要：单页面应用网页只有在第一次进入页面的的时候请求服务器的文件，接下来的页面跳转是基于内部的。单页面应用第一次要将所有的资源全部加载，所以首屏时间慢，但是后续的跳转不需要再次向服务器发请求。

多页面应用:网页HTML文件是请求后台发过来的。每次切换页面都会从后台把页面文件传输回来。
单页面应用:网页只有在第一次进入页面的、的时候请求服务器的HTML文件，接下来的页面跳转是基于内部的router。
两种应用的优缺点：

多页面应用只需要加载当前页面所需要的资源，所以首屏时间快。但是每切换一次页面都要去请求一次服务器资源。单页面应用第一次要将所有的资源全部加载，所以首屏时间慢，但是后续的跳转不需要再次向服务器发请求。

多页面应用可以直接实现SEO搜索，但是单页面得有一套多带带的SEO方案。

单页面可以实现局部刷新，多页面实现不了。

这里稍微的讲了一些单页面和多页面的一些知识，大家要知道 Vue 是一个单页面应用，其页面的跳转需要通过路由：Vue-router!!! vue-router的安装我们已经在前面的文章里讲过了，今天这篇文章就讲vue-router的使用。

基本使用

src/router/index.js

import Vue from "vue"
import Router from "vue-router"
import Parent from "@/components/Parent"
import Childs1 from "@/components/Childs1"
import Childs2 from "@/components/Childs2"
Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
 {
      path:"/parent",
      name:"Parent",
      component:Parent
    },
    {
      path:"/child1",
      name:"Childs1",
      component: Childs1
    },
   {
     path: "/child2",
     name:"Childs2",
    component:Childs2
   }
  ]
})

运行结果如下图：

我们输入不同的路由不同的组件被渲染出。首先我们将需要在路由里面渲染的组件引入，然后配置路由。path:是我们需要配置的路径名，component： 是我们需要在该路径下渲染的组件。

路由嵌套

我们在开发的过程中不应该只有一级路由。比如上面的例子，child应该放在`parent的下面，name我们将怎么样实现路由的嵌套呢？
当然是用路由嵌套啦~

src/router/index.js

import Vue from "vue"
import Router from "vue-router"
import Parent from "@/components/Parent"
import Childs1 from "@/components/Childs1"
import Childs2 from "@/components/Childs2"
Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
   {
      path:"/parent",
      name:"Parent",
      component:Parent,
      children: [
        {path:"child1", component: Childs1},
        {path:"child2", component: Childs2}
      ]
    }
  ]
})

Parent.vue

运行结果如下图：

Parent.vue 的是渲染其组路由组件的地方。我们可以看到url为/parent的时候，页面上只有paernt的字符串，当我们路由为两层的时候，parent和child全部展示在页面上。vue-router 会根据不同的路由加载不同的组件。

动态路由

如果我们要将某一种模式下的路由全部映射到同一个组件上，比如我们要将"/user/tom" 和 "/user/David" 都匹配到同样组件下面，那么动态路由是我们不二的选择。

src/router/index.js

import Vue from "vue"
import Router from "vue-router"
import Parent from "@/components/Parent"
import Childs1 from "@/components/Childs1"
Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
   {
      path:"/parent",
      name:"Parent",
      component:Parent,
      children: [
        {path: "child1/:name", component:Childs1}
      ]
    }
  ]
})

Parent.vue

Childs1.vue

运行结果如下图：

我们虽然在/child1后面输入不同的路径，但是最后全部映射到同一个组件上。this.$route.params对象存放我们的动态路由的内容。

动态路由引起的组件复用

动态路由就是将不同的路由映射到同一个组件上，如果两个路由是匹配到同一组件，那么Vue不会将当前组件销毁重建，而是直接替换不一样的内容，实现组件的复用。

src/router/index.js
同上

Parent.vue

Childs1.vue

运行结果如下图：

我们使用编程式导航来进行路由切换，title的初始值唯一，在我们点击按钮进行页面切换的时候，title没有变成初始值，而是复用了前一个页面的组件，在原来的基础上自增。第二章图片也显示，只有第一次进入的时候进入了生命周期钩子，以后的页面切换不再进入钩子。

编程式导航和声明式导航

编程式导航是调用方法push进行路由跳转，声明式导航是类似于a标签一样的的标签进行跳转。to属性的内容就是我们要跳转的目标路由。声明式导航最终渲染到页面也是a标签。

声明式导航在被点击的时候会调用编程式导航的方法。
Parent.vue*

Childs1.vue
同上

运行结果如下图：

li的外面包裹着router-link，当我们点击的时候，路由就会跳转到我们to指向的URL，我们点击按钮的时候，调用了"this.$router.push（url）"方法来进行跳转。这两种方法没有好与坏的区别，只是使用于不同的场景。

router.push()

push往history栈中加入一条记录，所以当我们使用浏览器的后退按钮时，还能够回到这一页。

router.replace()

replace是替换栈中当前页的记录，意味着history栈中不会再有当前页的记录。这种方法通常用来授权页，这样就不会有二次授权的情况出现。

router.go()

go是告诉浏览器在history栈中前进或者后退几步，所以我们一般的页面跳转用push才能在栈中新增一条记录，便于go使用。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108933.html

从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

tommego 2019-08-23 12:55 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

jhhfft 2019-08-02 11:56 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

frontoldman 2019-08-29 17:11 评论0 收藏0
Vue学习日记（三）——Vue路由管理vue-router

摘要：重定向可以实现某些需要根据特定逻辑改变页面原本路由的需求，例如简单的未登录状态下的页面访问个人信息路由时应该重定向到登录路由页面。前言为了给读者更好的体验，去理解vue-router和下一篇介绍vuex，决定还是来一个实战教程来带大家更加的去深入理解vue-router，在这之前，读者先自行了解和去官网下载npm和node，附：npm官网项目构建这里我采用vue-cli+web...

iKcamp 2019-08-30 13:54 评论0 收藏0
Vue学习日记（三）——Vue路由管理vue-router

摘要：重定向可以实现某些需要根据特定逻辑改变页面原本路由的需求，例如简单的未登录状态下的页面访问个人信息路由时应该重定向到登录路由页面。前言为了给读者更好的体验，去理解vue-router和下一篇介绍vuex，决定还是来一个实战教程来带大家更加的去深入理解vue-router，在这之前，读者先自行了解和去官网下载npm和node，附：npm官网项目构建这里我采用vue-cli+web...

tuniutech 2019-08-26 11:34 评论0 收藏0