通过 vue init webpack my-project 安装的 vue项目 结合 vue-router实践demo

2024年5月28日 175次阅读 来源: spademan

网上蛮多 vue-router 的例子和问题 但是比较少 最佳实践 初次接触vue,感觉弄了好久才弄好，
vue init webpack my-project 安装项目之后 id=‘app’ 并不是 写在index.html中
而是写在app.vue 使用router的时候一直提示 找不到 #app
所以 需要将 id = 'app'放在 index.html中 如下

// main.js
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
/* eslint-disable no-new */
Vue.use(VueRouter)
const router = new VueRouter()
const Foo = Vue.extend({
  template: '<p>This is foo!</p>'
})
const Bar = Vue.extend({
  template: '<p>This is bar!</p>'
})

router.map({
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})
router.start(App, '#app’)  //

// index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hyzs-1</title>
  </head>
  <body>
      <div id="app">
          <app></app>
      </div>
    <!-- built files will be auto injected -->
  </body>
</html>
    原文作者：spademan
    原文地址: https://segmentfault.com/a/1190000005184520
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞