[basic] Vue Router
Vue Routerとは?
Vueでサポートされている式ライブラリを使用すると、ルーティング機能を実現できます.
ルーティングとは?
Webページ間の移動方法を指します.ページを移動するときは,サーバにページのリフレッシュを要求するのではなく,事前にページを受信し,ページを移動するときにクライアントのルーティングを利用してページを更新する.画面間の切り替えをスムーズにします.
CDN
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
new VueRouter({
});
new Vue({
el:'#app',
});
</script>
</body>Vscode Live Server検証ルータアプリケーションの実行
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const router = new VueRouter({
});
new Vue({
el:'#app',
router: router
});
</script>
</body>
Routerプロパティ
<script>
const LoginComponent = {
template: '<div>login</div>'
}
const MainComponent = {
template: '<div>Main</div>'
}
const router = new VueRouter({
// 패이지의 라우팅 정보
① routes: [
{
// 페이지의 url 이름
② path: '/login',
//해당 url에서 표시될 컴포넌트
③ component: LoginComponent
},
{
path: '/main',
component: MainComponent
}
]
});
new Vue({
el:'#app',
router: router
});
</script>②path:ページurl
③component:当該URLに表示される画面
定義されたパスにルーティングするときにルータを適用
ページ移動url:http://localhost:5500/playground/router.html#/login
<div id="app">
<router-view></router-view>
</div>
const LoginComponent = {
template: '<div>login</div>'
}
const router = new VueRouter({
// 패이지의 라우팅 정보
routes: [
{
// 페이지의 url 이름
path: '/login',
//해당 url에서 표시될 컴포넌트
component: LoginComponent
},<div id="app">
<div>login</div>
</div>ジェネレータにルータが作成されていない場合、ERROR
new Vue({
el:'#app',
// router: router
});
</script>
Router Link
<div id="app">
<div>
<router-link to="/login">Login</router-link>
// <a href="/login">Login</a>
<router-link to="/main">Main</router-link>
</div>
<router-view></router-view>
</div>
<router-link to="/login">Login</router-link> 는 <a href="/login">Login</a> 라고 생각하면 된다.Urlで#hashを削除する方法
new Router({
mode: 'history',
router: [
{ path: '/login', component: LoginComponent },
{},
]
})url : http://localhost:5500/playground/router.html/login
reference : HTML5 History Mode | Vue Router
Reference
この問題について([basic] Vue Router), 我々は、より多くの情報をここで見つけました https://velog.io/@brianhwang/basic-Vue-Routerテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol