Vue回炉重造之router路由(更新中)

你好,我是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')

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

展开阅读全文
©️2020 CSDN 皮肤主题: 成长之路 设计师: Amelia_0503 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值