为了使程序更加清晰，在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"); },