HTML文件：**************** index.html:****************<!DOCTYPE html><html lang="en"><head> <meta ch
HTML文件：**************** index.html:****************
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script src="vue.min.js"></script> <!--<script src="vue-router.js"></script>--> <script src="vue-router.min.js"></script> <script src="aa.js"></script></head><body> <div id="app"> <h1>Hello App!</h1> <p> <!--使用指令v-link进行导航--> <a v-link="{path:'/foo'}">Go to Foo</a> <a v-link="{path:'/bar'}">Go to Bar</a> </p> <!--路由外链--> <router-view></router-view> </div></body></html>
JS文件：*aa.js8// 定义组件var Foo = Vue.extend({template: '<p>This is foo!</p>'})var Bar = Vue.extend({template: '<p>This is bar!</p>'})// 路由器需要一个根组件。// 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板var App = Vue.extend({})// 创建一个路由器实例// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置var router = new VueRouter()// 定义路由规则// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend// 创建的组件构造函数，也可以是一个组件选项对象。// 稍后我们会讲解嵌套路由router.map({'/foo': {component: Foo},'/bar': {component: Bar}})// 现在我们可以启动应用了！// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。router.start(App, '#app')
