引言

今天带大家学习一下vue-cli中的router(路由)部分。

一点简介

上面这张图片这是vue-cli的官方简介，我们看到了vuecli的很多优点与优势。他作为一个开发的脚手架，大大减少了我们程序员的开发和准备，配置的工作量。

很多初学者所陌生的可能是vue-cli的一些开发，vuecli脚手架开发应用和传统的三件套开发有很多的不同之处，比如便捷的组件开发，简单自动的配置等等。

但是很多初学者可能不知道的是：vuecli默认是一个单页面的开发。

大家可能会有些疑惑

咦？

单页面怎么开发那些复杂的网页呢？

难道只能做一些只有一个页面的简单的应用吗？

当然不是的

这里我们就引入今天学习的内容----vue-router的学习。

vue-router

我们可以在创建vue-router项目的时候去勾选vue-router这个选项。

然后去进行使用，并完成在一个页面中实现不同的效果与样式。

first

这是一个简单的Vue-cli 项目。

接下来我们做一个路由的配置，让其单页面应用也能完成复杂的页面的跳转改变。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

首先打开我们的main.js文件，文件内容如上。

接下来我们要使用vue-router

首先我们通过import来完成导入

import VueRouter from 'vue-router'

接下来我们来注册使用VueRouter

Vue.use(VueRouter);

两个组件的准备

我们先准备两个不同的"页面"，其实就是.vue的组件

PageA.vue组件如下：

<template>
    <div>
        这是页面A(PageA.vue文件)啊!!!!
    </div>
</template>

PageB的组件如下:

<template>
    <div>
        这是页面B(PageB.vue文件)啊!!!!
    </div>
</template>

接下来我们来配置vue-router来完成其之间的跳转。

const routers = [
  {path:'/pageA',component:PageA},
  {path:'/pageB',component:PageB}
]

简单解释一下上述代码，path是访问的录由，后面的component是什么，当然是我们要挂载的组件啦。

什么？你问我为什么没有PageA,PageB的输入提示，

肯定是你没有导入PageA和PageB啦

import PageA from '@/components/PageA.vue';
import PageB from '@/components/PageB.vue';

记得导入我们的PageA和PageB。

最后new Vue中的代码如下：

new Vue({
  render: h => h(App),
  router:new VueRouter({routes})
}).$mount('#app')

注意，new VueRouter中的代码使用了ES标准的简化写法，更简洁优雅。

传统写法。

最后

最后我们小改一下我们的组件，引入<router-link yo="目标路由></router-link>和<router-view></router-view>容器来完成

PageA.vue

<template>
    <div>
        这是页面A(PageA.vue文件)啊!!!!
        <router-link to="/PageB">B页面的跳转</router-link>
    </div>
</template>

PageB.vue

<template>
    <div>
        这是页面B(PageB.vue文件)啊!!!!
        <router-link to="/PageA">A页面的跳转</router-link>
    </div>
</template>

App.vue

<template>
  <div>
    <router-link to="/PageA">A页面的跳转</router-link>
    <router-view></router-view>
  </div>
</template>

最后完成，保存一下，我们可以看到效果了、