htmlでvue-routerを使用するためのサンプルコード
2022-01-21 08:08:22
vueとvue-routerの紹介
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
完全な例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello ! </h1>
<p>
<! -- Use the router-link component to navigate. -->
<! -- Specify the link by passing in the `to` attribute. -->
<! -- <router-link> will be rendered as a `<a>` tag by default -->
<router-link to="/hash1"> switch to com1</router-link>
<router-link to="/hash2"> switch to com2</router-link>
</p>
<! -- Routing exit -->
<! -- Components matched by the route will be rendered here -->
<router-view> </router-view>
<! -- Other properties on router-link: -->
<! -- If the replace property is set, router.replace() will be called instead of router.push() when clicked.
No history record is left after navigation. -->
<! -- <router-link :to="{ path: '/abc'}" replace></router-link> -->
<! -- sometimes want <router-link> to be rendered as some kind of tag, like <li>. So we use the
tag prop class to specify what kind of tag, which again will still listen for clicks and trigger navigation. -->
<! -- <router-link to="/foo" tag="li">foo</router-link> -->
<! -- active-class sets the CSS used when the link is active -->
<! -- event declares an event that can be used to trigger navigation. It can be a string or an array containing strings. -->
</div>
</body>
<script>
// 1. Define the (routing) component.
const com1 = { template: '<div>route1</div>' }
const com2 = { template: '<div>route2</div>' }
// 2. Defining routes
// Each route should map a component. Where "component" could be via Vue.extend()
// a component constructor created by Vue.extend(), or, just a component configuration object.
const routes = [
{ path: '/hash1', component: com1 },
{ path: '/hash2', component: com2 }
]
// 3. Create a router instance and pass `routes` configuration
const router = new VueRouter({
routes // (abbreviated) equivalent of routes: routes
})
// 4. Create and mount the root instance.
// To inject routes through the router configuration parameters so that the entire app has routing capabilities
const app = new Vue({
router
}). $mount('#app');//el is auto-mount, mount is manual mount (delayed)
</script>
</html>
htmlのサンプルコードでビュールーターの使用に関するこの記事を紹介し、より関連するhtmlの使用ビュールーターの内容は、スクリプトホームの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトホームをサポートして願っています！。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン