效果与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;

在上节课我们配置了两个页面，一个首页/一个列表页/list，现在我们要查看这两个页面只能通过在浏览器地址栏里输入url，这节课我们就来学习一下如何实现页面的跳转

router-link是vue-router自带的一个组件，表示一个链接元素，和原生的a标签非常像，比如我们在首页里增加一个router-link，点击后跳转到列表页

在router-link里有一个to属性，表示点击后要跳转的页面，跟a标签的href属性一样， 页面效果是这样的

其实它本来也被渲染成了一个a标签

这是最简单的router-link的使用，以后我们会介绍它的其他功能

用router-link还是不够灵活，比如我们点击一个按钮时，先要做一些别的事，比如向后台上传数据，再跳转页面，这时候我们用js去控制跳转页面就灵活多了 我们增加一个按钮，给它绑定一个点击事件

在点击回到事件里，我们有this.$router，获取到了路由对象，调用了它的push方法，参数就是我们要跳转的页面的路由，点击后页面就跳转了 这节课的逻辑很简单，主要是大家要把这两种跳转方式的写法记住，动手写一写，记得更快。

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，全局视图

方式一：

《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及以上。

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会保存传递过来的值，刷新不变

一.路由传参的三种方式

方式一：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可以使用下面两种方式跳转。1.链接式跳转，在跳转的地方直接引用。2.函数式跳转，对象进行跳转后读取和接收参数。

一般单页面应用，vue都是通过vue-router来做跳转（this. router.replace），不会像多页应用一样另起新标签页面显示(注：不是打开新的浏览器页面)。要想实现，可以用以下方式：

优点：此方式，可以把sessionStorage 中的token一起带过去。

缺点：在新标签页和旧标签页，组件之间方法调用会失效

只要将vue-router和windwow.open结合就好了。原理很简单，获取到需要跳转的地址，再把地址传递给window.open。

window.open会新建窗口打开路由地址，原页面的路由不做跳转。

跳转：

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