Vue回炉重造之router路由（更新中）

快来打我* 2021-08-28 01:57 386阅读 0赞

> 你好，我是**Vam的金豆之路**，可以叫我豆哥。2019年年度博客之星、技术领域博客专家。主要领域：**前端开发**。我的微信是 **maomin9761**，有什么疑问可以加我哦，自己创建了一个微信技术交流群，可以加我邀请你一起交流学习。最后自己也创建了一个微信公众号：**前端历劫之路**，欢迎关注。

--------------------

> 欢迎阅读本博文，本博文主要讲述【Vue回炉重造之router路由】，文字通俗易懂，如有不妥，还请多多指正。

## 安装vue-router ##

--------------------

npm i vue-router -S

## 配置 ##

--------------------

##### 1、创建文件夹与文件 #####

创建一个router文件夹，在文件夹中创建两个文件，分别是router.js和routes.js文件。

##### 2、编辑文件 #####

router.js（路由配置文件）

import Router from 'vue-router'
    import routes from './routes'
    
    export default ()=> { 
        return new Router({ 
            routes,
            mode:'history',
            fallback:true //对于浏览器不支持history模式的，会自动转成hash模式
        })
    }

routes.js（路由页面文件）

import Index from '../views/Index.vue'
    import Login from '../views/Login.vue'
    
    export default [
        { 
            path: '/',
            component: Index
        },
        { 
            path: '/login',
            component: Login
        }
    ]

main.js（Vue入口文件）

import Vue from 'vue'
    import App from './App.vue'
    import Router from 'vue-router'
    import createRouter from './router/router'
    Vue.use(Router)
    Vue.config.productionTip = false
    
    const router = createRouter()
    new Vue({ 
      router,
      render: h => h(App),
    }).$mount('#app')

> 谢谢阅读，如果觉得有感触，麻烦帮忙点个赞，关个注吧！