Vue-router

Home.vue才是真正的父组件，App.vue只是起到了一个容器的作用。

1、新建一个router.js，要和main.js平级；

2、router.js内容：

import Home from './components/home.vue'

const routers = [
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/',
      component: Home
  },
]
export default routers

//export default routers要放在最后，走后要有一行空格，ES6语法

export default routers要放在最后，走后要有一行空格，ES6语法

3、修改main.js内容：

 

import Vue from 'vue'
import VueRouter from 'vue-router'
import routers from './router'
import App from './App'

Vue.use(VueRouter)

Vue.config.productionTip = false;

/* eslint-disable no-new */

const router = new VueRouter({
  mode:'history',
  routes:routers
})

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router
});

 

 

4、嵌入App.vue容器：

 

 

 

这样当打开 http://localhost:8080 或者 http://localhost:8080/home 的时候就会默认打开home组件