vue项目实现界面跳转

为了使程序更加清晰，在src文件夹中建立router文件夹 ，在其中新建index.js，在此定义每个界面的路由。

import Vue from 'vue'
import Router from 'vue-router'
import index from '../components/index.vue'
import search from '../components/search.vue'
import fenping from '../components/fenping.vue'


Vue.use(Router);
const originalPush = Router.prototype.push

Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    },
    {
      path: '/search',
      name: 'search',
      component: search
    },
    {
        path: '/fenping',
        name: 'fenping',
        component: fenping
      },       
  ]
})

找了好多，都是说用哪个history，但是我用到这个的时候总是不跳转。然后就是在main.js中进行了引用。

import router from './router'    ./router就代表着我们之前定义的文件夹

new Vue({
  // jquery,
  router,   //在这里进行应用
  render: h => h(App),
}).$mount('#app')

然后需要注意的是还需要在app.vue中进行修改，将这些标红的一句放入界面即可，他就可以根据路由将界面渲染出来。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

另外就是跳转链接的设置

这里有两种跳转方式

1.直接使用push即在当前界面打开，进行渲染

    goTosearch() {
      this.$router.push("/search");
    },

2.在新的窗口打开

　　goToFenping() {
        //直接跳转
        let routeUrl = this.$router.resolve({
          path: "/fenping",
        });
        window.open(routeUrl.href, "_blank");

      },