浅入深出Vue：路由

包子也沉默 2019-07-09 1.38 K阅读 0评论

温馨提示：这篇文章已超过1421天没有更新，请注意相关的内容是否还可用！

路由的概念在计算机界中的历史大概可以追溯到OSI模型中的数据链路层与网络层中的定义。这里的定义大意是：在转发数据包时，根据数据包的目的地址进行寻址，从而将数据包发往指定的目的地。

在 Web开发中同样存在着路由的概念，在各式各样的前端 mvvm框架出来之前，普遍存在于后端。通俗的说法也就是 [module/]controller/action的组合，将 url映射到指定的 action中处理。现在在前端中同样存在着路由这一概念。

为什么需要路由

在以往的前端开发中，通常没有路由这一概念，这样就造成一个问题：

前端是离散的，不可独立的（静态页面除外，它不需要上下文）。

脱离了后端的前端无法较好的构建一个完整系统，当然也有一些比较优秀的方案：

单页应用，采用 ajax控制 dom节点以及动态修改页面内容

等等。

但不可否认的是，在没有路由这一概念的情况下，前端确实显得不够灵活，跳转页面时随处可见的路径硬编码。url 即物理路径。

为了完善前端开发，在后来的框架中，均引入了路由、控制器、视图等后端概念。借鉴成熟的东西来完善自身，这是非常便捷的一种方式。

因此在现在的前端开发中，路由也是必不可少的一环了。很多人被它的概念弄的晕头转向，让我们捋一捋，看看它的真面目。

路由是什么

前端中的路由更好理解。以 vue举例，vue-router会解析 url，将其映射到指定的 component进行渲染。因此，在这里我们给 vue中的路由一个通俗的、狭义的定义：

一个 url，对应着一个具体的组件实例。

路由是对 url进行解析，看这个 url是否存在有与之匹配的组件去渲染。

路由如何使用

在vue中分为三步：

1. 安装`vue-router`组件。

可以查看 package.json，看是否安装了 vue-router。没有的话安装一下即可。

在 vue-cli 3.x中，可以直接在左侧面板中的依赖里查看到，并且一键安装。

2. 使用`vue-router`

在 main.js中全局引入一下：

import Router from "vue-router"

Vue.use(Router)

3. 定义路由

在这一步，我们要定义路由。

即我们想让哪些 url解析到哪些组件上去，来看看官方的例子：

import Vue from "vue"
import Router from "vue-router"
import HelloWorld from "@/components/HelloWorld"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld
    }
  ]
})

例子中的 routes数组中有一个路由对象，这个路由对象定义了如下的路由：

url 对应根，即服务器web地址。
不能运行成功噢，哪怕实现了Login组件也不能看到预期的效果。还有一点最重要的需要注意：在子路由/嵌套路由的情况下，想要层层渲染到子路由/嵌套路由，必须在其上层路由对象的模板中，添加<route
此路由的名称是 HelloWorld，路由的名称可以用以路由间的跳转，但必须保证唯一。
-router能继续往下渲染。代码：<router-view:key="$route.fullPath"></router-view>很多童鞋就是被卡在这里
此路由对应的组件是 HelloWorld组件，这个组件在第三行代码中引入了。
to类与实体类的双向自动转换）、SignalR、Bootstrap、jQuery等。参考网站：http://www.aspnetboilerplate.com/。　　使用该框架进行开发时，第一步是从A

以上三点也是定义一个路由对象的基本要素，第二点非必须。

定义子路由

现在我们有 localhost/的路由了，如果再加一个 localhost/login的路由呢？

import Vue from "vue"
import Router from "vue-router"
import HelloWorld from "@/components/HelloWorld"

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: "/",
      name: "HelloWorld",
      component: HelloWorld,
      children: [
          {
              path: "login",
              name: "Login",
              component: Login
          }
      ]
    }
  ]
})

只需要在对应的路由对象下添加 children数组即可，数组内的对象的 path只需填相对路由即可。这里的例子可是不能运行成功噢，哪怕实现了 Login组件也不能看到预期的效果。

还有一点最重要的需要注意：

在子路由/嵌套路由的情况下，想要层层渲染到子路由/嵌套路由，必须在其上层路由对象的模板中，添加 <router-view>组件，让vue-router能继续往下渲染。

代码：

<router-view :key="$route.fullPath"></router-view>

很多童鞋就是被卡在这里了，还有另一种写法：

<router-view></router-view>

多级路由也是这么层层定义出来的。

路由间的跳转

在引入 vue-router之后，在组件中可以使用如下语句获取 vue-router实例：

this.$router

// 通过路由跳转,下面的代码会跳转到 localhost/login
this.$router.push("/login")

// 通过命名跳转, 下面的代码同样会跳转到 localhost/login
this.$router.push({ name : "Login" })

// 路由带参数跳转
this.$router.push({
    path: "/login",
    query: {
        username: "xxx",
    }
})

// 命名路由带参数跳转
this.$router.push({
    name: "Login",
    params: {
        username: "xxx",
    }
})

上述在带参数跳转的例子中，需要着重注意的一点：

当使用 path跳转时，参数只能使用 query，不能使用 params

也就是说，下面的代码是不能正常传递参数的：

this.$router.push({
    path: "/login",
    params: {
        username: "xxxx",
    }
})

在视图中可以使用如下代码进行跳转：

<router-link :to="{ path: "/login"}">login</router-link>

重点：

不管是 this.$router.push的参数，还是 router-link的 to参数，它们都可以是一个路由对象

记住这一点，就可以随心所欲的玩转跳转了。

写在最后

路由这篇没有demo演示，因为路由这部分想要更好的结合实践来学习的话，最好利用实战来学习。

因此这里只讲述了路由的概念和基本用法，以及使用中常见的几个问题。

我们在入门篇会经常使用到它的，会有更多的机会去深入的了解它，深入篇也会对它进行一个更深入的了解：如何自动化生成路由。

浅入深出Vue：路由

为什么需要路由

路由是什么

路由如何使用

1. 安装`vue-router`组件。

2. 使用`vue-router`

3. 定义路由

定义子路由

路由间的跳转

写在最后

相关阅读

发表评论取消回复

还没有评论，来说两句吧...

目录[+]

为什么需要路由

路由是什么

路由如何使用

1. 安装vue-router组件。

2. 使用vue-router

3. 定义路由

定义子路由

路由间的跳转

写在最后

相关阅读

发表评论取消回复

还没有评论，来说两句吧...

目录[+]

1. 安装`vue-router`组件。

2. 使用`vue-router`