vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航
路由:就是一个 key 与 value 的映射关系。key 就是 pathh
前台路由的 value 是 Component 组件对象
后台路由的 value 是一个 回调函数
普通链接: 会发送请求,与后台交互
路由链接: 不会发送请求,纯前台处理
request
body ---- post 请求体数据
params ---- /detail/:id 请求参数 冒号 用于占位,字符串 为参数名
query ---- /detail/5?name=Tom 请求字符串
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个路由_并向路由组件传递数据_新标签路由_编程式路由导航的更多相关文章
- vue.js编程式路由导航 --- 由浅入深
编程式路由导航 实例中定义一个方法,这个方法绑定在标签上 然后就设置路由跳转 语法 this.$router.history.push('要跳转路由的地址') <!DOCTYPE html> ...
- vue-router 编程式路由
$route -> 使用它的属性 $router-> 使用它的方法 编程式的导航,即js控制跳转 //声明式:<router-link :to="..."> ...
- VueJs(10)---vue-router(动态路由,嵌套式路由,编程式路由)
vue-router(动态路由,嵌套式路由,编程式路由) 本文是基于官网学习,官网具体学习目录:vue-router 一.安装 基于vue-cli脚手架安装还是蛮简单的:在文件当前目录下运行: npm ...
- 在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】
## react-router-dom 编程式路由导航 (v5) ###### 1.push跳转+携带params参数 ```jsx props.history.push(`/b/child1/${i ...
- SpringMVC 解析(四)编程式路由
多数情况下,我们在使用Spring的Controller时,会使用@RequestMapping的形式把请求按照URL路由到指定方法上.Spring还提供了一种编程的方式去实现请求和路由方法之间的路由 ...
- react之传递数据的几种方式props传值、路由传值、状态提升、redux、context
react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...
- Vue编程式路由跳转传递参数
Vue 有时在路由跳转时需要用到一些原页面里的数据,用以下方法: 1.在跳转页的方法里写下query参数 TableChange(scope){ this.$router.push({ path:'d ...
- vue编程式路由实现新窗口打开
一. 标签实现新窗口打开: 官方文档中说 v-link 指令被 组件指令替代,且 不支持 target=”_blank” 属性,如果需要打开一个新窗口必须要用标签,但事实上vue2版本的 是支持 ta ...
- Vue之单文件组件的数据传递,axios请求数据及路由router
1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...
随机推荐
- HBase读写的几种方式(一)java篇
1.HBase读写的方式概况 主要分为: 纯Java API读写HBase的方式: Spark读写HBase的方式: Flink读写HBase的方式: HBase通过Phoenix读写的方式: 第一种 ...
- 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性)
一. 简介 上一个章节中,也介绍了立即加载和延迟加载,但上一个章节是针对单表而言的,不含外键,立即也好,延迟也好,都是指单表中的数据.但本章节重点介绍的三种加载方式均是针对含(导航属性.外键)的情况下 ...
- npm常用命令学习(npm install -D,semver版本规范, npm进行版本管理的最佳实践用法)
什么是npm npm有两层含义.一层含义是Node的开放式模块登记和管理系统,网址为npmjs.org.另一层含义是Node默认的模块管理器,是一个命令行下的软件,用来安装和管理Node模块. npm ...
- Pipeline build step with parameters
build step https://jenkins.io/doc/pipeline/steps/pipeline-build-step/#build-build-a-job 一个任务的执行触发,另外 ...
- 常见的游戏AI技术对比(FSM,HFSM,BT,GOAP,HTN,Utilitay,机器学习)
最近研究的内容,比较懒还没写文章,先占个坑,过几天补
- shell 批量检测远程端口
[DNyunwei@YZSJHL24-209 li]$ cat port.sh #!/bin/bash # ip=`cat iplist` for i in $ip;do port=`ssh -t $ ...
- pip 安装问题
同时安装了Python2 和Python3的情况下,由于我的电脑默认的是使用Python3,pip的时候直接就安装在3上了,为了让2也安装,办法之一就是在安装python2的路径下比如,D:\Anac ...
- 计算int数组中的最大,最小,平均值
public static void testNumber(int[] arr) { int max = arr[0]; int min = arr[0]; int avg = 0; int sum ...
- 使用HBuilder+MUI+Flask后端服务器框架+Mongodb数据库开发手机APP
1.开发准备HBuilder: 1.下载安装HBuilder2.创建APP项目 3.代码示例: <!doctype html> <html lang="en"&g ...
- 如何让vue项目兼容IE浏览器
一般来说项目开发到后期都需要做各种兼容性处理例如:360.IE9以上.QQ浏览器....等等 那么现在来介绍一个工具 babel-cli 跟 babel-preset-es2015 babel-cli ...