前端框架Vue-页面路由配置

Vue-页面路由配置

定义一个VUE项目的SRC目录下定义一个route文件夹，目的就是更好的区分

• 定义一个js,文件名称随便定义

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path : '/',//访问路径
            name : 'home',
            component: () => import('@/components/home') //对应组件
        },
        {
            path : '/learningRecord', //访问路径
            name : 'xuexi',
            component: () => import('@/components/learningRecord') //对应组件
        },
        {
            path : '/upload', //访问路径
            name : 'upload file',
            component: () => import('@/components/my-upload') //对应组件
        },

    ],
    mode: "history" //去除访问时候带#问题
})

在main.js 引用路由

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router/index' //导入刚刚在route文件下定义的router
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
Vue.config.productionTip = false
Vue.use(router)
new Vue({
  vuetify,
  router,//引入路由
  render: h => h(App)
}).$mount('#app')