vue app准备学习工作

1.路由

1.vue-router

路由跳转

<router-link></router-link>相当于a标签的路由
或者 this.$router.push({path:''})
复制代码

路由渲染

<router-view></router-view>
复制代码

2.动态路由的匹配

$route.params获取路由信息
复制代码

history.back()//后退
history.go()//默认刷新
history.go(1);//前进
history.go(-1);//后退
复制代码

vue-router就是对history的一个封装

路由设置

Vue.use(Router);
export default new Router({mode:'history',//mode:'hash'routes:[{path:'/goods/:id',name:'',component:}]
});
复制代码

3.嵌套路由

routes:[{
path:'/goods',
name:'GoodsList',
component:GoodsList,
children:[{path:'title',name:'title',component:Title
},{path:'image',name:'image',component:Image
}
]
}
]
复制代码

app.vue中引入router-view挂载路由，在父组件中也需要用router-view挂载子组件，例如：

<router-link to='/goods/title'></router-link>//路由跳转
<router-link='/goods/image'></router-link>
<router-view></router-view>
复制代码

3.编程式路由

$router.push('name');//路由跳转
$router.push({path:'name'});
$router.push({path:'name?a=123'});
$router.push({path:'name',query:{a:123});
复制代码

4.命名路由和命名视图

<router-link v-bind:to="{name:'cart'}"></router-link>
<router-link v-bind:to="{name:'cart',params:{cartid:123}}"
复制代码

<router-view name="title"></router-view>
<router-view name="img"></router-view>components:{default:GoodsList ,title:Title,img:Image
}
复制代码

vue app准备学习工作相关推荐

软件或网站（学习工作生活）
学习学习软件 Notability [ 有录音功能 ]NotesPlus [可以将自己写的转换为文本 ] GoodNotes 这三个用于:记笔记 Clocks [时间] PushPl ...
Vue源码学习 - 组件化一 createComponent
Vue源码学习 - 组件化一 createComponent 组件化 createComponent 构造子类构造函数安装组件钩子函数实例化 VNode 总结学习内容和文章内容来自黄轶老师黄 ...
Vue 第一天学习 ---2018.06.28
Vue 第一天学习 ---2018.06.28 1.引包 2.学会控制元素.显示数据,基本框架建立 <title>Document</title> <script sr ...
10桌面管理文件收纳_二十余件精选桌面好物推荐，让学习工作生活满满正能量！...
这些提升办公桌幸福感的好物,能让你的学习与工作正能量满满! 01 笔记本支架笔记本是为了人们出行方便而设计的,显示器的位置并没有照顾到长期对着显示器码字的人群,许多以笔记本为主力的办公族也被迫成为了 ...
Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
vue 3.0学习1
vue 3.0学习一.vue 3.0 diff算法优化 1.vue 3.0六大亮点 2.vue 3.0 如何变快的? 1. diff方法优化 https://vue-next-template-ex ...
Vue源码学习 - 组件化(三) 合并配置
Vue源码学习 - 组件化(三) 合并配置合并配置外部调用场景组件场景总结学习内容和文章内容来自黄轶老师黄轶老师的慕课网视频教程地址:<Vue.js2.0 源码揭秘>. 黄轶 ...
Java+SpringBoot+vue英语单词学习网站
.计算机英语单词学习系统是通过对计算机英语单词学习管理核心要素的闭环整合,实现了工作流.信息流.资源流和办公自动化的整合管理,提供了一个科学.开放.先进的英语单词信息化学习平台,实现了单词信息的语种管 ...
Vue, App与我（八）
Vue, App与我(八) App的新功能: Big-man这里先要提供一张图吧: 一级菜单: 一级菜单也就是所谓图片的头部,返回按钮加抢购再加拼单,实现这个一级菜单还是比较简单,接下来是Big-ma ...
HTML5+app开发学习之快速入门篇
HTML5+app开发学习之快速入门篇 5+app开发概念理解相关开发环境与支持快速入门实战 5+app开发概念理解相关见博文:学习跨平台移动应用开发必须理解的一些概念开发环境与支持开发环境 ...

vue app准备学习工作

1.路由

1.vue-router

2.动态路由的匹配

3.嵌套路由

3.编程式路由

4.命名路由和命名视图

vue app准备学习工作相关推荐

最新文章

热门文章