Vue路由器（详细教程）

路由：

        1.理解：一个路由(route)就是一组映射关系（key-value)，多个路由需要路由器（router）进行管理。

        2.前端路由：key是路径，value是组件。

 1、先安装vue-router路由

npm i vue-router@3

2.main.js中应用插件

import Vue from 'vue'
import App from './App.vue'
//引入VueRouter
import VueRouter from "vue-router";
//引入自己配置完的路由
import router from './router'

//关闭vue生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
new Vue({
  el:'#app',
  render: h => h(App),
  router:router
})

app.vue

components.About.vue

components.Home.vue

3.创建路由router文件夹

router.index.js

//该文件专门用于创建整个文件的路由器
import VueRouter from 'vue-router'

import About from "@/components/About";
import Home from "@/components/Home";

//创建一个路由器
export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
    ]
})

完成：