Vue路由的安装与使用

在 src 文件夹中的 router 文件夹下的 index.js；

import Vue from 'vue'
import vueRouter from 'vue-router'
const Home= () => import('../pages/Home.vue')
Vue.use(vueRouter)

const routes = [
    {
        path:'',
        redirect:'/home'
    },
    {
        path:'/home',
        component:Home,
        meta:{
        }
    }];
    const router = new vueRouter({
        routes,
        mode:'history'
    }); 
    
    const originalPush = vueRouter.prototype.push
    vueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)
    
    };
     
    export default router;

在 main.js 文件中引入 router 

import Vue from 'vue'
import App from './App.vue'
import router from './router/app'   // 引入router

Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

App.vue文件如何配置？向下看

<template>
  <div id="app">
    <keep-alive exclude="searchResult">
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

<style>

</style>