路由:就是一个 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. 微信小程序 mpvue vant

    Mpvue中使用Vant Weapp组件库 https://segmentfault.com/a/1190000016228410?utm_source=tag-newest 小程序采坑记 mpvue ...

  2. C# mvc 前端调用 redis 缓存的信息

    新手 这几天网上学习下redis ,自己总结下过程,怕之后忘记了,基本会用最简单的,有的还是不懂,先记下来,自己摸索的. 没有安装redis的先安装,教程:http://www.cnblogs.com ...

  3. 有趣的若干个AI项目

    一.遗传算法跑贪吃蛇 1.下载processing,下载地址是:https://processing.org/download ,直接解压打开即可. 2.下载SnakeAI源码,下载地址是:https ...

  4. shell ip变量加法运算

    #!/bin/bash for ip in `cat a.txt`;do a=`echo $ip|awk -F '.' '{print $1}'` b=`echo $ip|awk -F '.' '{p ...

  5. 牛牛与数组 (简单dp)

    题目链接 这种题一看就是dp啊,dp[i][j]表示第i位放j的方案数,转移方程为dp[i][j]=dp[i-1][k]{k<=i||k%i!=0},当然我们可以三层循环来找,但数据显然会超时, ...

  6. jS处理中英文时间格式化问题

    // datebox里面日期格式化,i18nStr是当前国际化的日期格式,fdate是需要处理的时间,默认为当前时间 function formatDate(i18nStr,fdate) { var ...

  7. 菜鸟博客装饰分享CSS+HTML+js

    博客布局更改,各种百度,自己修改,搞成现在这样,有兴趣的朋友可以复制我下面的把自己博客覆盖了,然后在进行更改 不懂可加群问我:675678830 如果想开通打赏,用到js,需要在 下列中 博客侧边栏公 ...

  8. laravel 跨库执行原生 sql 语句

    执行原生 sql 返回结果集

  9. selenium——键盘操作

    很多键盘操作实际是没有意义的.

  10. 使用virtualenvwrapper模块管理python虚拟环境

    1.pip安装virtualenvwrapper [root@localhost ~]# pip install virtualenvwrapper # 安装virtualenvwrapper [ro ...