Vueプロジェクトカスタムコンポーネントの使用

1632 ワード

カスタムコンポーネント1の使用方法コンポーネントを作成します.template/script/style 2.ルーティングプロファイル(デフォルトrouter/index.js)にコンポーネントをインポートしてルーティングを構成すると、import Hello from'@/components/Hello'//コンポーネントをインポート//ルーティングpath:'/hello',name:'Hello',component:Hello}3になります.ブラウザ入力URL:http://localhost:8080/#/helloルーティングビューには、カスタムhelloコンポーネント4が表示されます.ページ内ナビゲーションrouter-linkカスタムコンポーネントの使用
完全なコードは以下の通りです:App.vue



export default {
  name: 'App'
}




router/index.jsルーティングファイル:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'Hello',
      component: Hello
    }
  ]
})

カスタムコンポーネント



 
export default{
    data(){
        return {
            name:"  "
        }
    }
}