Vue路由的页面跳转打开新页面
效果与a标签的target=_blank是一样的，只不过不用点击，直接打开
1、在router.js里新加一个路由
{
path: ’/previewFile’,
name: ’previewFile’,
meta: {
title: ’预览文件’,
hideInMenu: true
},
component: () =》 import(’@/view/audits/coms/previewFile.vue’)
},
2、在需要跳转的逻辑方法里加,这里必须用query，否则参数获取不到，亲测有效
const { href } = this.$router.resolve({
path: `/previewFile`,
query:{url:res.data.Url}
});
window.open(href, ’_blank’);
3、跳转页获取参数：let url=this.$route.query.url;
[vue-router4快速入门] 1.页面跳转的两种方式
在上节课我们配置了两个页面，一个首页/一个列表页/list，现在我们要查看这两个页面只能通过在浏览器地址栏里输入url，这节课我们就来学习一下如何实现页面的跳转
router-link是vue-router自带的一个组件，表示一个链接元素，和原生的a标签非常像，比如我们在首页里增加一个router-link，点击后跳转到列表页
在router-link里有一个to属性，表示点击后要跳转的页面，跟a标签的href属性一样，
页面效果是这样的
其实它本来也被渲染成了一个a标签
这是最简单的router-link的使用，以后我们会介绍它的其他功能
用router-link还是不够灵活，比如我们点击一个按钮时，先要做一些别的事，比如向后台上传数据，再跳转页面，这时候我们用js去控制跳转页面就灵活多了
我们增加一个按钮，给它绑定一个点击事件
在点击回到事件里，我们有this.$router，获取到了路由对象，调用了它的push方法，参数就是我们要跳转的页面的路由，点击后页面就跳转了
这节课的逻辑很简单，主要是大家要把这两种跳转方式的写法记住，动手写一写，记得更快。
Vue-(10)页面跳转-传值
Vue 页面跳转，一般用 vue-router 来做。 在我们创建 Vue 项目框架时，在配置文件 package.json 里面一般都有默认添加的依赖库。
我们只要创建好 Vue 项目，其他的不用管了，直接用 vue-router 来实现页面跳转-传值。
在页面 HelloWord.vue 点击按钮，跳转到页面 textVue.vue ，并且传值
一，创建两页面，跳转-传值
1，这里我们用 Vue 框架自带的页面 HelloWord.vue ，然后自己创建一个页面 textVue.vue ,并且放在一个文件下 componebts ，当然文件位置可以改变，为了图简单。
2， HelloWord.vue 页面，添加点击跳转-传值事件
两种方法 @click 方法和 router-link 方法。
在 HelloWord.vue 页面， @click 方法
在 HelloWord.vue 页面， router-link 方法`
3， textVue 页面，添加接受事件和展示传递的值
获取传递的值
展示传递的值
二，在 router 文件夹的 index 文件下，配置好页面路径
最终效果图如下：
注释：1，当新建 Vue 文件，不在文件下，在其他文件夹的时候，那么在 router 文件夹的 index 文件如下。
注释：2，全局视图
vue中利用a标签进行页面跳转，怎样做才能跳转呢
方式一：
《router-link :to=“’/jump?type=1’“》
《p id=“jump“》跳转《/p》
《/router-link》
方式二：
jump(){
this.$router.push({
name:“jump“
})
}
扩展资料
Vue 中 路由有两种不同的模式
hash 模式 （默认模式）
使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
hisotry 模式
history模式是基于最新的HTML5里面history相关的api进行的一些操作。不过这种模式要玩好，还需要后台配置支持不然会出现404找不到页面这种问题。history模式时，重定向会有些问题，需要页面的名字叫index.html才行。history模式只能兼容到IE10及以上。
vue 路由四种方式 (带参数)跳转
replace和push区别：
router.push(location) 会向 history 栈添加一个新的记录，当用户点击浏览器后退按钮时，则回到之前的 URL。
router.replace(location) ，replace 属性（默认值: false），它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
注意：获取路由上面的参数，用的是$route，后面没有r
params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失。
两者都可以传递参数，区别是什么？
query 传参配置的是path，而params传参配置的是name，在params中配置path无效
query在路由配置不需要设置参数，而params必须设置
query传递的参数会显示在地址栏中
params传参刷新会无效，但是query会保存传递过来的值，刷新不变
vue之路由传参，跳转，钩子函数
一.路由传参的三种方式
方式一：query的方式进行，通过添加？的方式传参
App页面配置：
childa页面配置：
方式二：通过id的方式传参，用到params
App页面配置：
childb页面配置：
index.js配置：
方式三：通过props：的方式进行id方式的传参，不需要用到params
app页面配置和上面id一样
childb页面配置：
index.js页面：
二.路由的跳转
1.使用push的两种方式进行跳转指定页面
2.添加一级路由：
（1）写一个按钮，然后写个方法，执行方法后进行路由的添加
（2）写好要跳转的页面
3.添加二级路由：
（1）写一个按钮，然后写个方法，执行方法后进行路由的添加
（2）写好要跳转的页面
三，路由的钩子函数（全局和局部）在router的index.js里配置
1.全局路由守卫，每次路由跳转都会执行一遍
router.beforeEach((to,from,next)=》{
next()//这个必须写
})
to:表示要去的路由，from：表示之前的路由，next：必须要执行的函数，next表示跳转方法
2.监听全局路由离开时触发的钩子函数
没有next（）
router.afterEach((to,from)=》{
})
3.局部路由钩子函数
局部的路由钩子进入路由的时候触发
因为同一个路径参数不同或者是动态路由，不会触发beforeEnter
beforeEnter:(to,from,next)=》{
next()}
vue中el-link为什么跳转不了页面
注册的路由中含有错误文件路径。
前端路由跳转含有错误文件路径，找不到需要跳转的页面。
vue中el-link可以使用下面两种方式跳转。
1.链接式跳转，在跳转的地方直接引用。
2.函数式跳转，对象进行跳转后读取和接收参数。
vue实现跳转浏览器新的标签页
一般单页面应用，vue都是通过vue-router来做跳转（this. router.replace），不会像多页应用一样另起新标签页面显示(注：不是打开新的浏览器页面)。要想实现，可以用以下方式：
优点：此方式，可以把sessionStorage 中的token一起带过去。
缺点：在新标签页和旧标签页，组件之间方法调用会失效
只要将vue-router和windwow.open结合就好了。原理很简单，获取到需要跳转的地址，再把地址传递给window.open。
window.open会新建窗口打开路由地址，原页面的路由不做跳转。
vue页面跳转
跳转：
1、直接跳转
《router-link to=“/detail/one“》link跳转 《/router-link》
2、携带参数跳转
《router-link :to=“{path:’/detail/two’, query:{id:1，name:’vue’}}“》link跳转 《/router-link》
3、打开新窗口跳转
《router-link :to=“{path:’/detail/three’, query:{id:1，name:’vue’}}“ target=“_blank“》link跳转《/router-link》
获取参数：
id = this.$route.query.id
1、path query 跳转：
this.$router.push({path: “/detail“, query: {id: e}})
获取参数：
id = this.$route.query.id
2、name params 跳转：
this.$router.push({name: “/detail“, params: {id: e}})
获取参数：
id = this.$route.params.id
跳转：
const new = this.$router.resolve({name: ’/detail’, params: {id: e}})
或
const new = this.$router.resolve({path: ’/detail’, query: {id: e}})
window.open(new.href,’_blank’)
获取参数：
id = this.$route.params.id
或
id = this.$route.query.id