vue 实现简单跳转

vue 跳转页面并且传值以及在新窗口打开页面的方法
1、建一个跳转页面demo.vue

<template>
  <el-row>
    <p>跳转界面1</p>
    <el-button style="float: left" type="primary" @click="show3">跳转回主页</el-button>
  </el-row>
</template>

<script>
  export default {
    name: 'demo',
    methods : {
      show3(){
        this.$router.push({ path:"/"})
      },
    }
  }
</script>

主界面：

<template>
  <div class="hello">
    <el-row style="margin-left: 10%">
      <el-button style="float: left" type="primary" @click="show1">查询</el-button>
      <el-button style="float: left" type="primary" @click="show3">跳转</el-button>
      <el-button @click="toDemo">
        新页面打开demo页
      </el-button>
      <router-link target="_blank" :to="{name:'demo',params:{id:78}}">
        新页面打开demo页1
      </router-link>
    </el-row>
  </div>
</template>

<script>
  import ElButton from "../../node_modules/element-ui/packages/button/src/button.vue";
  import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
  export default {

    components: {
      ElInput,
      ElButton
    },
    name: 'HelloWorld',
  data() {
    return {
      tableData:[],
      city:"",
    };
  },
  methods: {
    toDemo () {
      this.$router.push({ name:"demo",params:{id:78}})
    },
    show3(){
      this.$router.push({ path:"/demo"})
    },
  }
</script>

2、在ruoter的index.js注册路由

import Vue from 'vue'
import Router from 'vue-router'
import demo from '@/components/demo'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/demo',
      name: 'demo',
      component: demo
    },
  ]
})

3、在main.js引入router

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

其他：

跳转页面并且是新窗口打开

<router-link target="_blank" :to="{path:'/demo',query:{id:78}}">
  新页面打开demo页
</router-link>
<router-link target="_blank" :to="{name:'demo',params:{id:78}}">
  新页面打开demo页1
</router-link>



有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，通过编写代码实现。我们常用的是router.push 和router.go 但是vue2.0以后，这种方式就不支持新窗口打开的属性了，这个时候就需要使用this.$router.resolve,如下：

```javascript
<el-button @click="toDemo">
  新页面打开demo页
</el-button>

toDemo () {
  //这是第二种
  let routeUrl = this.$router.resolve({
    path: "/demo",
    query: {id:78}
  });
  let routeUrl1 = this.$router.resolve({
    name: "demo",
    params:{id:78}
  });
  window.open(routeUrl.href, '_self');

  //获取到值
  // console.log(this.$route.query.id);
 //  console.log(this.$route.params.id);
},

仅跳页面的话用router.push和router.go 就好了

toDemo () {
  this.$router.push({ name:"demo",params:{id:78}})
  //   this.$router.push({ path:"/demo",params:{id:78}})
},

在demo界面获取带过来的参数
mounted () {
  console.log(this.$route.params.id);
}