Vue-router

Posted 2020-10-29 _Iniesta

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组件