标签：Vue css js vuetify router import 路由 页面

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')

标签：Vue,css,js,vuetify,router,import,路由,页面
来源： https://www.cnblogs.com/caicai920/p/16371818.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。