vue-router
SPA: SinglePageApplication
单页面应用程序
vue在实现单页面应用程序,要借助他的路由,即vue-router
下载vue-router,在页面中引入相关的模块
具体使用代码过程:
- 首先引入vue和vue-router
- 在html里写相关的链接,这里链接还是通过a标签来定义,但是通过 v-link来绑定链接的地址
- 再通过router-view ,把相关的内容呈现在router-view里
- js部分,一共分为五步,定义根组件、准备路由对应的组件、准备路由、关联、开启
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--引入vue 和 vue-router-->
<script src="bower_components/vue/dist/vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">主页</a>
</li>
<li>
<a v-link="{path:'/news'}">新闻</a>
</li>
</