您现在的位置:首页 >> 前端 >> 内容

html开发vue-router教程示例

时间:2018/1/6 15:56:06 点击:

  核心提示:1、vue-router介绍vue框架作为一个单页面应用(SPA)的框架,路由应该是其中最重要的一部分。路由作为单页面应用的核心,原因就是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 就能达到视图展示的效果。
他们的使用方式和普通标签一样,,相当于vue-router提供的组件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

Hello App!

Go to Foo Go to Bar

Tags:HT TM ML L开 
作者:网络 来源:mapbar_fro