El enrutamiento de Vue salta para pasar parámetros o abre una nueva página para saltar

1. A través del atributo de nombre en la ruta 

Usar paramsparámetros de paso, usar this.$route.paramsparámetros de obtención

Esta forma de pasar es equivalente a postuna solicitud, y los datos pasados ​​​​no se mostrarán en urlla barra de direcciones, pero la página se actualizará y los parámetros se perderán

// 传递参数
this.$router.push({
    name: "首页",
    params: {
        code: 1
    }
})
// 获取参数
this.$route.params

 2. A través del atributo de ruta en el atributo de enrutamiento 

Usar queryparámetros de paso, usar this.$route.queryparámetros de obtención

Este método es equivalente a getuna solicitud, los parámetros pasados ​​se mostrarán en urlla barra de direcciones, la página se actualizará y los parámetros permanecerán en urlella

// 传递参数
this.$router.push({
    path: "/dashboard",
    query: {
        code: 1
    }
})
// 获取参数
this.$route.query

Al obtener los parámetros pasados, se utilizathis.$route

 3. La diferencia entre $router y $ruta

$router Puede ver $routerque es una VueRouterinstancia de enrutamiento global

$routeEs un objeto que almacena información de enrutamiento, y los datos transmitidos se almacenan $routeen

4. Haga clic en Saltar en el proyecto Vue para abrir una nueva página

Utilice this.$router.resolve({path: "/login"})la información que puede llegar a la ruta especificada

window.open(routeData.href, '_blank')Abra la página de enrutamiento especificada en una nueva ventana usando

query:{code: 1}Pase parámetros, pero puede urlver los parámetros pasados ​​en la barra de direcciones

this.$route.queryObtener parámetros por

let routeData = this.$router.resolve({ path: '/login',query: {loginName}});
window.open(routeData.href, '_blank');

 El salto de Vue (abrir una nueva página)

salto de enlace de enrutador

   // 直接写上跳转的地址
  <router-link to="/detail/one">
   <span class="spanfour" >link跳转</span>
  </router-link>
  // 添加参数
  <router-link :to="{path:'/detail/two', query:{id:1，name:'vue'}}">
   </router-link>
  // 参数获取
  id = this.$route.query.id
  // 新窗口打开
  <router-link :to="{path:'/detail/three', query:{id:1，name:'vue'}}" target="_blank">
  </router-link>

this.$router.push/replace jump 

toDeail (e) {
   this.$router.push({path: "/detail", query: {id: e}})
 }
 // 参数获取
 id = this.$route.query.id
  
 toDeail (e) {
   this.$router.push({name: "/detail", params: {id: e}})
 }
 // 注意地址需写在 name后面
 //参数获取，params和query区别，query参数在地址栏显示，params的参数不在地址栏显示
 id = this.$route.params.id

 resolver salto

    //resolve页面跳转可用新页面打开
    //2.1.0版本后，使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了
 toDeail (e) {
   const new = this.$router.resolve({name: '/detail', params: {id: e}})
   window.open(new.href,'_blank')
 }

 ventana.abrir()

1. Abra Baidu en la ventana actual y haga que la dirección URL aparezca en la barra de búsqueda.

window.open("http://www.baidu.com/", "_search");
window.open("http://www.baidu.com/", "_self");

2. Abre Baidu en una ventana nueva

window.open("http://www.baidu.com/", "_blank");

3. Abra una nueva ventana y asígnele el nombre "hola"

window.open("", "hello");

Además, hay varias opciones para el segundo parámetro de la función abrir:

• _top : si hay conjuntos de marcos en la página, la URL reemplazará la capa superior de conjuntos de marcos, es decir, si no hay conjuntos de marcos, el efecto es equivalente a _self.
• _parent: La página a la que apunta la url se carga en el padre del marco actual, si no, el efecto es equivalente a _self.
• _media : url所指向的页面加载到Media Bar所包含的HTML代码区域中.如果没有Media Bar则加到本身.

如果还要添加其它的东西在新的窗口上, 则需要第三个参数：

• channelmode : yes|no|1|0  (窗口显示为剧场模式[全屏幕显示当前网页, 包括工具栏等],或频道模式[一般显示]).
• directories :  yes|no|1|0 (是否添加目录按钮, 比如在IE下可能会有一个"链接"这样的按钮在最上面出现)
• fullscreen : yes|no|1|0 (使浏览器处理全屏幕模式, 并隐藏标题栏和菜单等)
• menubar : yes|no|1|0 (是否显示浏览器默认的菜单栏)
• resizeable : yes|no|1|0 (窗口是否可调整大小)
• scrollbars : yes|no|1|0 (是否允许水平或垂直滑动条)
• titlebar : yes|no|1|0 (是否添加一个标题栏)
• toolbar : yes|no|1|0 (是否添加浏览器默认的工具栏)
• status : yes|no|1|0 (是否显示状态栏)
• location : yes|no|1|0  (是否显示搜索栏)
• copyhistory :  yes|no|1|0 (似乎已经废弃, 如果只要工具栏显示, 历史按钮就会显示出来)
• height : 窗口的高度, 最小值为100像素
• width :  窗口的宽度, 最小值为w100像素
• left : 窗口的最左边相对于屏幕的距离