通知短信+运营短信,5秒速达,支持群发助手一键发送🚀高效触达和通知客户 广告
# 基本用法 使用 Vue.js 和 vue-router 创建单页应用非常的简单,使用 Vue.js 开发,整个应用已经被拆分成了独立的组件。在使用 vue-router 时,我们需要做的就是把路由映射到各个组件,vue-router 会把各个组件渲染到正确的地方。下面是个简单的例子: ### HTML ``` html <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> ``` ### JavaScript ``` js // 定义组件 var Foo = { template: '<p>This is foo!</p>' } var Bar = { template: '<p>This is bar!</p>' } // 路由器需要一个根组件。 // 出于演示的目的,这里使用一个空的组件,直接使用 HTML 作为应用的模板 var App = {} // 创建一个路由器实例 // 创建实例时可以传入配置参数进行定制,为保持简单,这里使用默认配置 var router = new VueRouter() // 定义路由规则 // 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend // 创建的组件构造函数,也可以是一个组件选项对象。 // 稍后我们会讲解嵌套路由 router.map({ '/foo': { component: Foo }, '/bar': { component: Bar } }) // 现在我们可以启动应用了! // 路由器会创建一个 App 实例,并且挂载到选择符 #app 匹配的元素上。 router.start(App, '#app') ``` 查看示例应用 [在线](http://jsfiddle.net/yyx990803/xyu276sa/).