vue-router教程示例

1、vue-router介绍

vue框架作为一个单页面应用（SPA）的框架，路由应该是其中最重要的一部分。

路由作为单页面应用的核心，原因就是router路由是一个项目的骨架，有了骨架，我们才能真正的填充基于这个骨架的血肉。

所以，vue-router是为了解决一个vue应用的骨架问题。

2、vue-router引入方式

使用script标签的方式：如果仅仅是学习，script方式是可以的。但是项目中一般不这样做。

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

使用npm + import 的方式：一般项目中使用这样的方式

npm install --save vue-router

import Router from 'vue-router'

3、router-link 和 router-view

在一个路由中，我们希望达到这样的一个特效，通过点击某个按钮，展示不同的视图View。

其中 router-link 就能达到这样的一个按钮的效果。router-view 就能达到视图展示的效果。

他们的使用方式和普通标签一样，<router-link></router-link>、<router-view></router-view>，相当于vue-router提供的组件。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>

4、