美文网首页
[vue学习]route/index.js两种引入页面的方式

[vue学习]route/index.js两种引入页面的方式

作者: 音无级鹦鹉螺号szhiku | 来源:发表于2019-07-16 07:51 被阅读0次

第一种是页面自带的引入方式:
index.js代码:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Demo1 from '@/pages/demo1/index.vue' //from后面是文件路径,@是根目录vue

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/demo1',
      name: 'demo1',
      component: Demo1 //和第4行的Demo1一致
    }
  ]
})

第二种是使用require函数(该方法有些编辑器不会有代码提示):
index.js代码:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Demo1 from '@/pages/demo1/index.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/demo1',
      name: 'demo1',
      component: Demo1
      // component: require("@/pages/demo1/index.vue")
    }
  ]
})

相关文章

网友评论

      本文标题:[vue学习]route/index.js两种引入页面的方式

      本文链接:https://www.haomeiwen.com/subject/dpwakctx.html