Vue router 让你实现单页面中的“网页”跳转

Vue router 让你实现单页面中的“网页”跳转（上）

一.什么是router？

在单页面应用程序中，不同视图（组件）的内容在同一个页面中渲染，页面间的跳转都是在浏览器端完成。这就需要路由，因此给出定义：Vue router是WebApp的连接路径管理系统，帮助开发者完成组件渲染的切换。

二.如何使用router

首先我们在安装项目的时候就需要勾选router，当然也可以单独安装，对于安装比较简单，在这里笔者不再赘述

我们首先来认识router中最重要的两个标签之一 router-link

三.router-link

首先我们直观来认识一下该便签的代码

<router-link to="/parent">Parent页</router-link>

这个标签可以与a便签对比学习，而且如果不做什么改变，router-link本身也是会渲染成a标签的；

to就相当与a便签的href属性，在这里告诉浏览器要跳转到哪个网页（组件）上

那么大家在这里就会产生疑问，在a标签中href是有具体的域名地址或者文件路径，在to中是否也得这么写呢？

答案是否定的，在vue中需要自己配置路径，也就是接下来要说的router.js

四.router.js

在项目的src目录下我们很容易就可以找到这个文件，在这个文件中我们来配置路由的连接路径

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

  }
 ]

})

上面是一个初始的js文件，如果我们想要加上一个页面（组件）跳转，就需要进行配置，首先引入需要被跳转的组件，让后在routes中配置，以parent页举例：

import Parent from './views/parent.vue'


  {

   path: '/parent',

   name: 'Parent',

   component: Parent

  }

这就完成了路径的设置，我们将刚才的代码

<router-link to="/parent">Parent页</router-link>

写在home中来试一试；

在home页中：

点击parent页：

如此我们完成了跳转，是不是也挺简单的？

五.router-link的快捷设置

在html中规定，a标签可以包裹任何标签，以便开发者完成网页的跳转；

这router-link也是也可以的，以button做个例子

<router-link to="/parent">

  <button>Parent页</button>

</router-link>

但是在router-link中有更便捷的方式，看以下代码

<router-link tag="button" to="/parent">

  Parent页

</router-link>

大家可以试试，是一样的效果，做个总结：

router-link可以通过tag属性直接变成相应便签，简化代码