Vue项目配置router.js流程分析讲解

import Vue from 'vue'
//引入Router
import Router from 'vue-router'
//elementui是我自己用的ui框架你如果不用可以不用引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//引入需要展示的页面
import Home from '@/page/Home'
Vue.use(Router);
Vue.use(ElementUI);
const router =new Router({
    routes:[
        {
            //配置页面的路径
            path:'/page/Home',
            //把上面import引入的组件名配置在这里，不然无法显示。
            component:Home
        },
    ]
})
//最后导出，因为要在main.js中引入
export default router

import Vue from 'vue';
import App from './App.vue';
import router from './router'
//这个是我引入的向后端请求的模块，你如果用的不是axios可以不用写
import axios from 'axios';
Vue.prototype.$http = axios;
Vue.config.productionTip = false;
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

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

<template>
    <div id="app">
        <router-view ></router-view>
        <button @click="tiaozhuan">跳转</button>
    </div>
</template>
<script>
methods: {
    tiaozhuan（）{
        this.$router.push('/page/Home');
    }
}
</script>