vue的路由初识01
- 今天就做了一个vue-router的实例,(路由跳转,参数的传递[一个参数,多个参数])
<!DOCTYPE html>- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <script src="../vue.js"></script>
- <script src="../vue_router.js"></script>
- </head>
- <body>
- <div id="app">
- <p>
//传递一个参数- <router-link to="/user/foo">/user/foo</router-link> <br>
- <router-link to="/user/foo/git/3333">/user/foo/git</router-link> <br>
- <router-link to="/user/foo/profile">/user/foo/profile</router-link> <br>
- <router-link to="/user/foo/getObj/65">by path</router-link> <br>
- //传递多个 参数(通过路由 的名字进行路由的跳转)
- <router-link :to="{name:'getObjs',params:{age:'53',name:'刘德华'}}">/user/foo(by name)</router-link>
- </p>
- <router-view></router-view>
- </div>
- </body>
- </html>
- <script>
- const User = {
- template: `
- <div class="user">
- <h2>User----- {{ $route.params.age}}</h2>
- <router-view></router-view>
- </div>`
- }
- const UserHome = { template: '<div>{{$route.params.id}}-----username</div>' }
- const UserProfile = { template: '<div>Profile</div>' }
- const UserPosts = { template: '<div>Posts</div>' }
- const getObj={
- methods:{
- getName:function(){
- alert(this.$route.params.age);
- }
- },
//在模板中通过$route.params.参数名,就可以访问你传递的参数- template:'<div> <span>{{$route.params.name}}</span> <button @click="getName">点击获取年龄</button></div>',
- }
- const router = new VueRouter({
- routes: [
- { path: '/user/foo', component: User,
- children: [
- // UserHome will be rendered inside User's <router-view>
- // when /user/:id is matched
- { path: 'git/:id', component: UserHome },//接收传递的参数
- // UserProfile will be rendered inside User's <router-view>
- // when /user/:id/profile is matched
- { path: 'profile', component: UserProfile },
- // UserPosts will be rendered inside User's <router-view>
- // when /user/:id/posts is matched
- { path: 'posts', component: UserPosts },
- {path:'getObj/:age',component:getObj},
- {path:'getobj',component:getObj,name:'getObjs'}//路由的名字
- ]
- }
- ]
- })
- const app = new Vue({ router }).$mount('#app')
- </script>
vue的路由初识01的更多相关文章
- 如何优雅的使用vue+vux开发app -01
如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...
- VUE框架的初识
VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...
- vue(5)—— vue的路由插件—vue-router 常用属性方法
前端路由 看到这里可能有朋友有疑惑了,前端也有路由吗?这些难道不应该是在后端部分操作的吗?确实是这样,但是现在前后端分离后,加上现在的前端框架的实用性,为的就是均衡前后端的工作量,所以在前端也有了路由 ...
- vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失
vue父路由默认选中第一个子路由,切换子路由让父路由高亮不会消失 正常默认会有 .router-active-class 识别高亮 达到以上注意: 1. exact 不要加 注意是不要加,exact ...
- vue的路由映射问题
遇到的问题 今天在项目中遇到了一个问题,明明在Router文件夹下的路由js映射文件中,配置好了,如下: // 生日贺卡 { path: 'birthdayRemind', component: lo ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue.js路由
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- Vue.js路由详解
有时候,我们在用vue的时候会有这样的需求,比如一个管理系统,点了左边的菜单栏,右边跳转到一个新的页面中,而且刷新的时候还会停留在原来打开的页面. 又或者,一个页面中几个不同的画面来回点击切换,这两种 ...
- vue权限路由实现方式总结二
之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...
随机推荐
- Nginx启动/重启失败
解决方案: Nginx启动或重启失败,一般是因为配置文件出错了,我们可以使用nginx -t方法查看配置文件出错的地方.也可以通过查看Nginx日志文件定位到Nginx重启失败的原因,Nginx日志文 ...
- Ansible 小手册系列 十八(Lookup 插件)
file:获取文件内容 --- - hosts: all vars: contents: "{{ lookup('file', '/etc/foo.txt') }}" tasks: ...
- jps、jstack、jmap、jhat、jstat、hprof使用详解
https://my.oschina.net/feichexia/blog/196575#comment-list A. jps(Java Virtual Machine Process Status ...
- Oracle recovery manager failed to restore
解决办法: 1:清理过期失效的备份, 2:增加recovery_file_dest_size参数值即可: SQL> show parameter db_recover NAME ...
- SSH服务:packet_write_wait: Connection to 67.218.143.160 port 22: Broken pipe错误处理
1.在~/.ssh/config配置文件中添加 IPQoS lowdelay throughput 2.在/etc/ssh/ssh_config配置文件中添加 IPQoS lowdelay throu ...
- 转一个有意思的利用存储过程备份恢复PostgreSQL
[转自 housonglin1213 的博客]http://blog.csdn.net/housonglin1213/article/details/51005540 1.自定义函数脚本备份 CREA ...
- Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
这里也会遇到一次性关闭所有modal引起阴影遮罩的问题,也就是所有modal都关闭了,但是主页面仍然被阴影遮罩. 这个问题从哪来的,是因为modal叠加,我们点击窗口之外的空白部分,一次性关闭所有mo ...
- 熟悉linux命令
<鸟哥的linux私房菜>这本书终于看到了敲命令行这块了,有点小激动,打开虚拟机,开始~~~敲!!! 登录界面,用户名密码~~~ 登录成功,下面开始熟悉一下,linux的常见命令了: li ...
- java中遍历类中的属性、调用getter&setter方法
public static void testReflect(Object model) throws NoSuchMethodException, IllegalAccessException, I ...
- MySQL笔记之多表
貌似很久不写博客了,趁着项目刚完结,记录一下这段时间了解到的一些认识,或许有些地方理解的还不够到位,看到的希望能不吝赐教. 外键 概念 与索引的关系 写法 查询 一对多多对一查询 多对多查询 插入 多 ...