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
router/index.jsルーティングファイル:
カスタムコンポーネント
完全なコードは以下の通りです: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
}
]
})
カスタムコンポーネント
{
{name}}, ,
export default{
data(){
return {
name:" "
}
}
}