以下是vue默认模板结构,自动加载HelloWorld
(1)@ 等价于 /src 这个目录,避免写麻烦又易错的相对路径,是在webpack.base.config.js里面配置好别名
(2)import VueRouter1 from 'vue-router' 含义:将vue-router模块中的对象赋值给VueRouter1变量
(3)import router2 from './router' 含义:将router目录的对象赋值给router2变量
(4)router:router2, 由于将变量名写为了router2,因此不能用简写模式,直接写一个router
目录结构:
index.js
import Vue from 'vue'
import VueRouter1 from 'vue-router'
import HelloWorld from '@/components/HelloWorld' Vue.use(VueRouter1) export default new VueRouter1({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
main.js
import Vue from 'vue'
import App from './App'
import router2 from './router' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router:router2,
components: { App },
template: '<App/>'
})