Vue routing jumps to pass parameters or open a new page to jump

1. Through the name attribute in the route

Use paramspass parameters, use this.$route.paramsget parameters

This way of passing is equivalent to posta request, and the passed data will not be displayed in urlthe address bar, but the page will be refreshed, and the parameters will be lost

// 传递参数

this.$router.push({

name: "首页",

params: {

code: 1

}

})

// 获取参数

this.$route.params

2. Through the path attribute in the routing attribute

Use querypass parameters, use this.$route.queryget parameters

This method is equivalent to geta request, the passed parameters will be displayed in urlthe address bar, the page will be refreshed, and the parameters will remain on urlit

// 传递参数

this.$router.push({

path: "/dashboard",

query: {

code: 1

}

})

// 获取参数

this.$route.query

When getting the passed parameters, it is usedthis.$route

3. The difference between $router and $route

$router You can see $routerthat it is a global routing VueRouterinstance

$routeIt is an object that stores routing information, and the transmitted data is stored $routein

4. Click Jump in the Vue project to open a new page

Use this.$router.resolve({path: "/login"})the information that can get to the specified route

window.open(routeData.href, '_blank')Open the specified routing page in a new window using

query:{code: 1}Pass parameters, but you can urlsee the passed parameters in the address bar

this.$route.queryGet parameters by

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

Vue's jump (open a new page)

router-link jump

// 直接写上跳转的地址

<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

resolve jump


    //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')
 }

window.open()

1. Open Baidu in the current window, and make the URL address appear in the search bar.

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

2. Open Baidu in a new window

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

3. Open a new window and name it "hello"

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

In addition, there are several options for the second parameter of the open function:

_top : If there are framesets on the page, the url will replace the topmost layer of framesets, that is, if there are no framesets, the effect is equivalent to _self.
_parent: The page pointed to by the url is loaded to the parent of the current frame, if not, the effect is equivalent to _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 : 窗口的最左边相对于屏幕的距离