vue-learning:37 - router - 目录
vue路由vue-router
目录
- 前端路由历史
- 服务端渲染(SSR:server side render)
- 客户端路由(client side routing)
- 前端路由实现原理
- hash模式: location.hash 和 hashChange事件
- history模式: history 和 popstate事件
- vue-router
- const router = new VueRouter(option)中的选项对象option
- 路由器实例对象router
- 路由对象route
- router-link标签的特性
- router-view标签的特性
- 路由传参的5种方式
1.路由动态参数: '/user/:userId'和params
js const route = {path: '/user/:userId'} this.$router.push({path:`/user/${userId}`}) this.$route.params.userId
2.命名路由传参,使用name和params
js const route = {name:'home',...} this.$router.push({name:'Login',params:{id:'leelei'}}) this.$route.params.id
3.查询参数传参,使用path和query
js this.$router.push({path:'/login',query:{id:'leelei'}) this.$route.query.id
4.prop形式:布尔/对象/函数
js const route = [{prop:true, ...}] const route = [{prop: {someProp:'someValue'}] const routes =[{props: (route) => ({ query: route.query.q }),...}]
5.meta元信息定义数据
js // 定义路由时,定义元信息 const routes = [ {meta: {someData:'someData'},... }, // 获取数据 this.$route.meta.someData
vue-learning:37 - router - 目录的更多相关文章
- vue项目中router路由配置
介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router: cnpm install vue-rou ...
- Vue 组件之 Router
Vue 组件之 Router Vue 开发单页应用的时候,免不了使用Vue组件.在单页应用上如何进行组件切换? 结构如下图所示: 主页面包含Foo组件与Bar组件,在主页面中可以进行Foo与 Bar的 ...
- vue学习之router
路由文档:https://router.vuejs.org/zh/guide/ 使用vue做spa应用的话,一定会涉及到路由. 安装 安装router插件 npm install vue-router ...
- vue中的项目目录assets和staitc的区别
vue中的项目目录assets和staitc的区别 在进行发行正式版时,即为npm run build编译后, assets下的文件如(js.css)都会在dist文件夹下面的项目目录分别合并到一个文 ...
- Vue的路由Router之导航钩子和元数据及匹配
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
- vue全家桶router、vuex、axios
main.js import Vue from 'vue' import App from './App' import router from './router' import store fro ...
- Vue Learning Paths
Vue Learning Paths Vue Expert refs https://vueschool.io/articles/vuejs-tutorials/exciting-new-featur ...
- 【面试题】Vue中的$router 和 $route的区别
Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...
- 从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的
如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...
随机推荐
- mysql自定义function 写递归查询子节点
#存储文本信息表 CREATE TABLE WordInfoEntity( word_id ) PRIMARY KEY NOT NULL, # 主键ID UUID word_greda :正文文本 , ...
- 【Java-加密算法】对称加密、非对称加密、单向散列(转)
一提到加密,就会联想到数字签名,这两个经常被混淆的概念到底是什么呢? 加密:加密是一种以密码方式发送信息的方法.只有拥有正确密钥的人才能解开这个信息的密码.对于其他人来说,这个信息看起来就像是一系列随 ...
- Directx11 教程(1) 基本的windows应用程序框架(1)
原文:Directx11 教程(1) 基本的windows应用程序框架(1) 在vs2010中,建立一个新的win32工程,名字是: myTutorialD3D11, 注意:同时勾选Cr ...
- 基于jQuery的自定义滚动条
在线演示 本地下载
- springboot thymeleaf【转】【补】
thymeleaf模板 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 1.引入thymeleaf依赖 <!-- ...
- 微信小程序左滑显示按钮demo
wxml结构(删除部分代码): <view class="chapter-item" wx:for="{{klgData}}" data-index=&q ...
- 阿里云异构计算发布:轻量级GPU云服务器实例VGN5i
阿里云发布了国内首个公共云上的轻量级GPU异构计算产品——VGN5i实例,该实例打破了传统直通模式的局限,可以提供比单颗物理GPU更细粒度的服务,从而让客户以更低成本.更高弹性开展业务.适用于云游戏. ...
- oracle函数 TO_CHAR(x[[,c2],C3])
[功能]将日期或数据转换为char数据类型 [参数] x是一个date或number数据类型. c2为格式参数 c3为NLS设置参数 如果x为日期nlsparm=NLS_DATE_LANGUAGE 控 ...
- qt 中创建一个工作线程(例子)
当一个事件需要很长的处理时间,就创建一个工作线程,防止主界面卡死. 1.新建一个QT的gui项目,里面包含main.cpp,mainwindow.h,mainwindow.cpp,mainwindow ...
- 手动封装AJAX
正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...