vue路由vue-router

目录

  1. 前端路由历史

    1. 服务端渲染(SSR:server side render)
    2. 客户端路由(client side routing)
  2. 前端路由实现原理
    1. hash模式: location.hash 和 hashChange事件
    2. history模式: history 和 popstate事件
  3. vue-router
    1. const router = new VueRouter(option)中的选项对象option
    2. 路由器实例对象router
    3. 路由对象route
    4. router-link标签的特性
    5. router-view标签的特性
  4. 路由传参的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 - 目录的更多相关文章

  1. vue项目中router路由配置

    介绍 路由:控制组件之间的跳转,不会实现请求.不用页面刷新,直接跳转-切换组件>>> 安装 本地环境安装路由插件vue-router:    cnpm install vue-rou ...

  2. Vue 组件之 Router

    Vue 组件之 Router Vue 开发单页应用的时候,免不了使用Vue组件.在单页应用上如何进行组件切换? 结构如下图所示: 主页面包含Foo组件与Bar组件,在主页面中可以进行Foo与 Bar的 ...

  3. vue学习之router

    路由文档:https://router.vuejs.org/zh/guide/ 使用vue做spa应用的话,一定会涉及到路由. 安装 安装router插件 npm install vue-router ...

  4. vue中的项目目录assets和staitc的区别

    vue中的项目目录assets和staitc的区别 在进行发行正式版时,即为npm run build编译后, assets下的文件如(js.css)都会在dist文件夹下面的项目目录分别合并到一个文 ...

  5. Vue的路由Router之导航钩子和元数据及匹配

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

  6. vue全家桶router、vuex、axios

    main.js import Vue from 'vue' import App from './App' import router from './router' import store fro ...

  7. Vue Learning Paths

    Vue Learning Paths Vue Expert refs https://vueschool.io/articles/vuejs-tutorials/exciting-new-featur ...

  8. 【面试题】Vue中的$router 和 $route的区别

    Vue中的$router 和 $route的区别 点击视频讲解更加详细 this.$route:当前激活的路由的信息对象.每个对象都是局部的,可以获取当前路由的 path, name, params, ...

  9. 从零开始:一个正式的vue+webpack项目的目录结构是怎么形成的

    如何从零开始一个vue+webpack前端工程工作流的搭建,首先我们先从项目的目录结构入手.一个持续可发展,不断加入新功能,方便后期维护的目录结构究竟是长什么样子的?接下来闰土大叔带你们一起手摸手学起 ...

随机推荐

  1. mysql自定义function 写递归查询子节点

    #存储文本信息表 CREATE TABLE WordInfoEntity( word_id ) PRIMARY KEY NOT NULL, # 主键ID UUID word_greda :正文文本 , ...

  2. 【Java-加密算法】对称加密、非对称加密、单向散列(转)

    一提到加密,就会联想到数字签名,这两个经常被混淆的概念到底是什么呢? 加密:加密是一种以密码方式发送信息的方法.只有拥有正确密钥的人才能解开这个信息的密码.对于其他人来说,这个信息看起来就像是一系列随 ...

  3. Directx11 教程(1) 基本的windows应用程序框架(1)

    原文:Directx11 教程(1) 基本的windows应用程序框架(1)        在vs2010中,建立一个新的win32工程,名字是: myTutorialD3D11, 注意:同时勾选Cr ...

  4. 基于jQuery的自定义滚动条

    在线演示 本地下载

  5. springboot thymeleaf【转】【补】

    thymeleaf模板 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 1.引入thymeleaf依赖 <!-- ...

  6. 微信小程序左滑显示按钮demo

    wxml结构(删除部分代码): <view class="chapter-item" wx:for="{{klgData}}" data-index=&q ...

  7. 阿里云异构计算发布:轻量级GPU云服务器实例VGN5i

    阿里云发布了国内首个公共云上的轻量级GPU异构计算产品——VGN5i实例,该实例打破了传统直通模式的局限,可以提供比单颗物理GPU更细粒度的服务,从而让客户以更低成本.更高弹性开展业务.适用于云游戏. ...

  8. oracle函数 TO_CHAR(x[[,c2],C3])

    [功能]将日期或数据转换为char数据类型 [参数] x是一个date或number数据类型. c2为格式参数 c3为NLS设置参数 如果x为日期nlsparm=NLS_DATE_LANGUAGE 控 ...

  9. qt 中创建一个工作线程(例子)

    当一个事件需要很长的处理时间,就创建一个工作线程,防止主界面卡死. 1.新建一个QT的gui项目,里面包含main.cpp,mainwindow.h,mainwindow.cpp,mainwindow ...

  10. 手动封装AJAX

    正常函数的调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...