vue-router（1）

1.spa和路由

spa是指单页面应用。

SPA：Single Page Application，单页面应用。

SPA的优缺点：

优点：提供流畅的用户体验，避免了不必要的跳转和重新渲染，服务器压力小。  

缺点：不利于seo（搜索引擎页面），初次加载页面更耗时，历史管理需要编程实现

现在，我们面临着一个问题。在vue.js中，如何实现页面之间的切换呢？

回到vue.js中，在vue.js中，我们可以使用组件来替代页面的概念。

在vue中，我们所提到的页面，可以认为就是一个组件。

页面之间的切换，可以看做是组件之间的切换。

有一个动态组件的用法，可以实现组件之间的切换。

动态组件可以实现组件之间的切换，但是它的功能非常有限，不适合进行项目开发。

所以，需要有一个专业的工具来帮我们实现组件之前的切换。

 

这个工具就叫做路由。

所谓的路由，就是指给定一个请求，返回相应的页面（在vue的单页应用中，页面就是组件）。

而且，在单页应用中，路由是利用哈希（#）来实现的

 

2.基本使用

(1).下载

 

https://unpkg.com/vue-router/dist/vue-router.js

https://github.com/vuejs/vue-router

 

(2).在页面中引入

(3).实现步骤

比如，要实现三个组件之间的切换。

  首页面组件

  列表页组件

  详情页组件

 步骤：

1.先定义好三个组件

使用vue-router就不需要作为某个组件的子组件来注册。

 

2.在视图层面，需要使用router-link和router-view

router-link的作用，就好比是a标签，

router-view的作用，是用来占位的，组件显示的位置。

3.代码层面

需要实现如下三个步骤：

 配置路由[path和component]

实例化路由对象

 注入路由