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

Vue路由最佳实践

weixin_34336526

于 2016-05-23 16:16:45 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript ViewUI

原文链接：https://segmentfault.com/a/1190000005184520

网上蛮多 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>