Vueの学習ノート08-VUE-cliのブートプロセス

いいえ2例ありません---ルーティングおよびルーティング

ルートがありません

スタートページを参照してください。

 

 

 ファイルmain.js(エントリファイルVUEプロジェクト)内で

 

ここでは、index.htmlをファイルにそのdiv要素である上記#app、に結合、世界の、生成されたVUEの例を見ることができます。
次いで、VUEの例は、./Appこのコンポーネントを使用して、その後、テンプレートがある:「<APP />」、アセンブリアプリでレンダリングされることが記載されています。

index.htmlファイルを見て

 

 そしてApp.vueを見に行きました

 

 

このコンポーネントをApp.vue、IMGはテンプレートで、以下は「./components/HelloWorld」内のコンポーネントは、です。
「./components/HelloWorld」から参照部品の輸入HelloWorldの、何hello.vueこのコンポーネントを見ては、基本的には、以下の個々のリンクあり


 ルーティング(重要)

index.htmlファイルは変更されていません

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>leyou-manage-web</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

入口文件main.js多了路由参数

 
 
import router from './router'
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue文件多了router-view

<template>
    <router-view></router-view>
</template>

<script>
export default {
  name:"App"
}
</script>

也就是说路由会替换掉这个router-view进行显示

再看router/index.js

 

 也就是说‘/’默认路由会使用Helloword这个组件进行显示了,添加其他的路由再对应上相应的组件即可进行显示。

 

おすすめ

転載: www.cnblogs.com/somethingWithiOS/p/11972512.html