菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue 测试实例 - 小鸟启蒙(facesoho.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> </head> <body> <div id="app"> <h1>花径不曾缘客扫,蓬门今始为君开</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">海内存知己</router-link> <router-link to="/bar">亲友如相问</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div><script> // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)// 1. 定义(路由)组件。 // 可以从其他文件 import 进来 const Foo = { template:'<div>海内存知己,天涯若比邻。 王勃《送杜少府之任蜀州 / 送杜少府之任蜀川》</div>' } const Bar = { template:'<div>洛阳亲友如相问,一片冰心在玉壶。 王昌龄《芙蓉楼送辛渐》</div>' }// 2. 定义路由 // 每个路由应该映射一个组件。 其中"component" 可以是 // 通过 Vue.extend() 创建的组件构造器, // 或者,只是一个组件配置对象。 // 我们晚点再讨论嵌套路由。 const routes = [ { path:'/foo', component:Foo }, { path:'/bar', component:Bar } ]// 3. 创建 router 实例,然后传 `routes` 配置 // 你还可以传别的配置参数, 不过先这么简单着吧。 const router = new VueRouter({ routes // (缩写)相当于 routes:routes })// 4. 创建和挂载根实例。 // 记得要通过 router 配置参数注入路由, // 从而让整个应用都有路由功能 const app = new Vue({ router }).$mount('#app')// 现在,应用已经启动了! </script> </body> </html>
运行结果