使用Vue路由的一些疑惑总结。

当index.html或,index.ejs作为第一个页面被加载时,会加载我们的主main.js(不管你这的名字取的是什么,总会有一个主js文件),一般会有如下代码:

new Vue({
  components: { App },
  router,
  store,
  template: '<App/>'
}).$mount('#app')

而index.html一般如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>APP</title>
    <% if (htmlWebpackPlugin.options.nodeModules) { %>
      <!-- Add `node_modules/` to global paths so `require` works properly in development -->
      <script>
        require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
      </script>
    <% } %>
  </head>
  <body>
    <div id="app"></div>
    <!-- Set `__static` path to static files in production -->
    <script>
      if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
    </script>

    <!-- webpack builds are automatically injected -->
  </body>
</html>

那么Vue的实例在<div id="app"></div>这个标签的范围内有效。router将会匹配第一个出现的 <router-view></router-view>并替换它。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容