[Vue教程]vue-router知识详解

本章将为大家介绍 vue-router，vue-router 是官方的路由管理工具，用它来组建单页面的应用是非常简单的，我们可以在页面上去组合我们需要的功能组件，来形成我们单页面的应用，在之前《[Vue 教程]认识 vue-cli 脚手架工具》我们用 UI 工具创建了 hello-ui 这个项目，我们 cd 到这个目录下来。

cd hello-ui

然后运行这个项目:

npm run serve

我们在创建完项目时，在它的目录下会有一个 router.js 文件

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

在这个 router.js 文件，其实就已经为我们定义好了两个默认的路由，第一个是根目录，“/”代表根目录，使用到的 component 组件是 Home 组件，是用的组件是 views/Home.vue 组件。

第二个是“/about”路径，它使用的组件是 views/About.vue 组件

{
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}

我们来看一下页面：

当我们点击 about 的时候，其实它加载的的是 about 这个组件

我们打开控制台看一下，它有两个路由链接，第一个路由链接是 Home，第二个路由链接是 About，当我们点击 about 这个链接的时候，它就加载了 About 这个组件

当我们点击 Home 链接时，它就加载 Home 组件

那么我们怎么创建一个属于自己的路由呢？

我在 views 目录下新建一个 Info.vue 组件，它就会自动形成一个文件目录

<template>
</template>

<script>
    export default {
        name: "Info.vue"
    }
</script>
<style scoped>
</style>

包括 template、script、style，template 代表的是页面的模板，script 代表组件执行的一个代码，还有它的一个样式 style。

我在 Info 组件的 template 添加 div 输入这样一段话“hello info component”

<template>
    <div>
      hello info component
    </div>
</template>

然后我们如何把它加到我们的路由里面呢？很简单，就像 Home 组件和 About 组件一样在 router.js 文件直接照着葫芦画个瓢，就搞定了。如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Info from './views/Info.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/info',
      name: 'info',
      component: Info
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

但是页面上还没有 info 这个链接，链接到 Info 组件上来，怎么办呢？我们在 App.vue 组件里添加链接就和 about 一样，如下：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
      <router-link to="/info">Info</router-link>
    </div>
    <router-view/>
  </div>
</template>

这样我们就已经完整地把 Info 组件添加上了，大家可能觉得刚刚我的操作有点枯燥，但是我给大家总结一下大概有这么几个过程，首先我们要由一个 router-link 去链接到这个组件，其次在这个 router.js 就是这个控制我们整个页面路由的文件里面，我们要去定义这个组件以及告诉我们的路由控制器它在 views 下面“import Info from ‘./views/Info.vue’”，然后它的名称叫什么，最后，就是我们要去自己定义这个组件。

我们到页面上看一下：

从上图看出，当我们点击 Info 的时候，页面成功的加载了 Info.vue 这个组件。

这个例子就是简单的一个 router 的创建，以及 router 的使用方法，下篇文章我再带大家去做如何在复杂的单页面上去使用它。

以上关于[Vue教程]vue-router知识详解的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。