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

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

1
cd hello-ui

然后运行这个项目:

1
npm run serve

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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组件。

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

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

1
2
3
4
5
6
7
8
{
      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')
}

我们来看一下页面:

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

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
   
</template>

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

<style scoped>

</style>

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

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

1
2
3
4
5
<template>
    <div>
      hello info component
    </div>
</template>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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一样,如下:

1
2
3
4
5
6
7
8
9
10
<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’”,然后它的名称叫什么,最后,就是我们要去自己定义这个组件。

我们到页面上看一下:

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

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

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

未经允许不得转载:码云笔记 » [Vue教程]vue-router知识详解
喜欢(0) 打赏

评论抢沙发

评论前必须登录!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

在线客服

在线客服

  • 扫描二维码,微信联系 扫描二维码,微信联系