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权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...
随机推荐
- IOS-github优秀开源项目大全
github优秀开源项目大全-iOS 前言 本文旨在搜集github上优秀的开源项目 本文搜集的项目都是用于iOS开发 本文会持续更新… 完整客户端 ioctocat github的iOS客户端,目前 ...
- Ansible 小手册系列 十七(特性模块)
异步操作和轮询 --- # Requires ansible 1.8+ - name: 'YUM - fire and forget task' yum: name=docker-io state=i ...
- java开发中beancopy比较
在java应用开发过程中不可避免的会使用到对象copy属性赋值. 1.常用的beancopy工具 组织(包) 工具类 基本原理 其他 apache PropertyUtils java反射 B ...
- C#中Abstract和Virtua笔记,知识
在C#的学习中,容易混淆virtual方法和abstract方法的使用,现在来讨论一下二者的区别.二者都牵涉到在派生类中与override的配合使用. 一.Virtual方法(虚方法) virtual ...
- C++复习15.指针知识
C++复习15.指针知识 4.指针知识 在Tencent 笔试和面试中都考到了 C/C++中的指针知识,因为自己很不喜欢使用指针,所以才开始学习 Java的,但是现在看来还是躲不掉的,所 ...
- 内存保护机制及绕过方法——利用Ret2Libc绕过DEP之ZwSetInformationProcess函数
1. DEP内存保护机制 1.1 DEP工作原理 分析缓冲区溢出攻击,其根源在于现代计算机对数据和代码没有明确区分这一先天缺陷,就目前来看重新去设计计算机体系结构基本上是不可能的,我们只能靠 ...
- LeetCode OJ:Convert Sorted List to Binary Search Tree(将排序好的链表转换成二叉搜索树)
Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...
- EasyDSS流媒体服务器实现RTMP直播同步HLS录像和时移回放
本文转自EasyDarwin团队成员Alex的博客:http://blog.csdn.net/cai6811376/article/details/74166337 "目前在市面上可以找到的 ...
- 【Spring实战】Spring容器初始化完成后执行初始化数据方法
一.背景知识及需求 在做WEB项目时,经常在项目第一次启动时利用WEB容器的监听.Servlet加载初始化等切入点为数据库准备数据,这些初始化数据是系统开始运行前必须的数据,例如权限组.系统选项.默认 ...
- Azure 软件架构选择
1. 传统的分层结构+message broker + worker传统的层结构老生常谈了: UI 层,service,业务逻辑,数据层.就不赘述了与worker形成producer-consumer ...