vue-router路由(一)
来源:互联网 发布:php yaf导出excel表格 编辑:程序博客网 时间:2024/06/07 08:25
Getting Started
用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。下面是个基本例子:
HTML
<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view></div>
JavaScript
// 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)// 1. 定义(路由)组件。// 可以从其他文件 import 进来const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</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')// 现在,应用已经启动了!要注意,当
<router-link>
对应的路由匹配成功,将自动设置 class 属性值.router-link-active
。阅读全文
0 0
- vue-router路由(一)
- Vue-Router(一) 嵌套路由
- vue.js路由vue-router(一)——简单路由基础
- vue 路由vue-router
- vue路由 vue-router
- Vue 路由 vue-router
- vue成长之路+实战+Vue2+VueRouter2+webpack(一)vue-router路由入门
- vue成长之路+实战+Vue2+VueRouter2+webpack(一)vue-router路由入门
- Vue路由(router)使用注意事项
- vue-router学习二(动态路由)
- vue-router: 嵌套路由
- vue-router 路由
- vue-router: 嵌套路由
- vue-router路由
- vue-router 路由
- 前端路由 -- vue-router
- vue-router -- 嵌套路由
- Vue 路由(router)
- 常见编程题——数组中和为某一个值
- 动态规划(0-1背包问题)
- UART总结
- 文字相似度算法
- Method之invoke()方法的使用
- vue-router路由(一)
- 5 个 Laravel Eloquent 小技巧
- 素数判断及矩形交集的实现
- linux驱动 之 module_init解析 (上)
- 15.3Sum
- OC语言中的标记#pragma mark 在swift中标记方法
- Transaction rolled back because it has been marked as rollback-only
- SqlServer with递归查询的使用
- mtk-[FAQ20206]如何使用adb command来设置cpu频率 和核数