路由:就是一个 key 与 value 的映射关系。key 就是 pathh

前台路由的 value 是 Component 组件对象

后台路由的 value 是一个 回调函数

普通链接: 会发送请求,与后台交互

路由链接: 不会发送请求,纯前台处理

request

body ---- post 请求体数据

params ---- /detail/:id 请求参数        冒号 用于占位,字符串 为参数名

query ---- /detail/5?name=Tom 请求字符串

vue-router

npm install vue-router --save

src/router -------- 1. 定义路由器对象模块

import Vue from "vue"

import VueRouter from "vue-router"

import Home from "./pages/Home"

import About from "./pages/About"

Vue.use(VueRouter);

export default new VueRouter({

mode: "history",        // 路由链接不带 #

routes:[

{

path: "/home",

component: Home

},

{

path: "/about",

component: About

}

]

})

src/main.js -------- 入口文件,2. 配置 路由器

import router from "./router"

new Vue({

router        // 配置路由器

})

src/App.vue -------- 3. 使用路由

// 路由链接

<router-link to="/about">About</router-link>

<router-link to="/home">Home</router-link>

 

// 渲染当前路由对应的组件 - 将会给所有相关路由页面 传递 msg

<router-view msg="123abc"></router-view>

// 实现: 缓存路由组件对象,页面的前进、后退,会保存之前用户输入数据

//<keepalive>

//<router-view msg="123abc"></router-view>

//</keepalive>    // 比如股票这种实时性要求高的需求,不能使用 <keepalive>

  • 路由组件传递数据 还可以使用 params 和 query
  • 编程式路由导航

this.$router.back() / this.$router.go(-1)

this.$router.go(1)

this.$router.push(path)

this.$router.replace(path)

  • 使用 $router.resolve 这种方法能够实现新窗口打开路由,示例代码如下:

参考: https://www.cnblogs.com/zhangruiqi/p/9266704.html

  • // this.$router.push("/searchGoods");
    let routeData = this.$router.resolve({
    name: "searchGoods",
    query: params,
    params:{catId:params.catId}
    });
    window.open(routeData.href, '_blank');

虽然是单页面应用 SPA,但是难免会遇到 "新标签打开,用户体验会更好" 的情况。

vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航的更多相关文章

  1. vue.js编程式路由导航 --- 由浅入深

    编程式路由导航 实例中定义一个方法,这个方法绑定在标签上 然后就设置路由跳转 语法 this.$router.history.push('要跳转路由的地址') <!DOCTYPE html> ...

  2. vue-router 编程式路由

    $route -> 使用它的属性 $router-> 使用它的方法 编程式的导航,即js控制跳转 //声明式:<router-link :to="..."> ...

  3. VueJs(10)---vue-router(动态路由,嵌套式路由,编程式路由)

    vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...

  4. 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】

    ## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...

  5. SpringMVC 解析(四)编程式路由

    多数情况下,我们在使用Spring的Controller时,会使用@RequestMapping的形式把请求按照URL路由到指定方法上.Spring还提供了一种编程的方式去实现请求和路由方法之间的路由 ...

  6. react之传递数据的几种方式props传值、路由传值、状态提升、redux、context

    react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...

  7. Vue编程式路由跳转传递参数

    Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...

  8. vue编程式路由实现新窗口打开

    一. 标签实现新窗口打开: 官方文档中说 v-link 指令被 组件指令替代,且 不支持 target=”_blank” 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 ta ...

  9. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

随机推荐

  1. EF CodeFirst系列(8)--- FluentApi配置单个实体

    我们已经知道了在OnModelCreating()方法中可以通过FluentApi对所有的实体类进行配置,然而当实体类很多时,我们把所有的配置都放在OnModelCreating()方法中很难维护.E ...

  2. WEB内容换行

    word-wrap:break-word 单词间换行 word-break:break-all 单词内也可以换行 white-space属性指定元素内的空白怎样处理 normal 默认.空白会被浏览器 ...

  3. [物理学与PDEs]第1章第2节 预备知识 2.3 Faraday 电磁感应定律

    1.  Faraday 电磁感应定律: 设 $l$ 为任一闭曲线, 则 $$\bex \oint_l{\bf E}\cdot\rd {\bf l} =-\int_S \cfrac{\p {\bf B} ...

  4. 浏览器录宏重放软件-iMacros

    iMacros https://imacros.net/ iMacros v12 Now Available The world's most popular web automation, data ...

  5. Java(4)switch选择结构

    一.switch结构(开关语句)的语法 switch(表达式 ){--->类型为int.char case  常量1 :--->case 结构可以有多个 //语句块1 break;---& ...

  6. 【转载】Jenkins安装以及邮件配置

    转载:http://www.nnzhp.cn/archives/590 Jenkins介绍 Jenkins是一个java开发的.开源的.非常好用持续集成的工具,它能帮我们实现自动化部署环境.测试.打包 ...

  7. java核心36

    1 Java平台 Java采用的是解释和编译混合的模式.它首先通过javac将源码编译成字节码文件class.然后在运行的时候通过解释器或者JIT将字节码转换成最终的机器码.只是用解释器的缺点:抛弃了 ...

  8. 在deepin 15.5中安装vs code并配置c/c++环境

    原文地址:https://blog.csdn.net/DefetC/article/details/79946100 参考了以下几篇文章: https://www.zhihu.com/question ...

  9. 【原创】Linux基础之后台运行

    linux服务器通常都是远程登录的,执行命令或者脚本时,如果连接断掉(执行时间较长或者网络不稳定时),那么进程也就没了,这时只能重新连接重新执行,这时可以使用后台执行: 1 nohup 命令 nohu ...

  10. 【原创】大叔问题定位分享(6)Dubbo monitor服务iowait高,负载高

    一 问题 Dubbo monitor所在服务器状态异常,iowait一直很高,load也一直很高,监控如下: iowait如图: load如图: 二 分析 通过iotop命令可以查看当前系统中磁盘io ...