[Doit!Vue.js]第4章
第四章開発者用Webアプリケーションに必要な技術ルータとHTTP通信
04-1ビュールータ
ルーティングとは?
ルーティングは、Webページ間の移動方法です.
ルーティングは、主に1ページのアプリケーションSPAに使用されます.
ルーティングは、画面間の切り替えをスムーズにするだけでなく、アプリケーションのユーザー体験を向上させることができます.
ビュールータ
ビュールータは、ビューでルーティング機能を実装することをサポートする正式なライブラリです.
ビュールータを使用すると、ビューで作成したページ間を自由に移動できます.
ビュールータを実装する際に必要な特殊なタグと機能
ラベル摘要パッシブラベル.画面は表示され、クリックすると指定されたURLページに移動します。根据变更的URL发布了便利网的领域.ルータの練習を表示します<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Router Sample</title>
</head>
<body>
<div id="app">
<h 1>ビュールータの例</h 1>
<p>
<router-link to="/main">メインコンポーネントに移動</router-link>
<router-link to="/login">Loginコンポーネント</router-link>//URL値を変更するタグ
</p>
<router-view></router-view>//URL値に基づいて更新される画面領域
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>//ルータCDNの追加
<script>
var Main = { template: '<div>main</div>'};
var Login = { template: '<div>login</div>'}; // 構成部品の定義
var routes = [
{ path: '/main', component: Main },
{ path: '/login', component: Login }
]; // 各URLで表示する構成部品を指定します
var router = new VueRouter({
routes
}); // ビュールータの定義
var app = new Vue({
router
}).$mount('#app'); //ビューインスタンスへのルータの追加
</script>
</body>
</html>スクリプトコードには、現在のMain、Login構成部品を定義する部分が含まれている。在"路丁"标题中,指定由URL值表示的构成部件。在维尔塔连接鲁丁的部分,由于制作维森斯坦斯,插入鲁特。mount()APIはmount()APIであり、mount()APIはmount()APIであり、el propartiと同様に画面にInstanceを貼り付ける役割を果たす.如果制作Instance的话,即使不加入el程序,也可以在制作后使用$mount()使用Instance强迫在画面上贴付.比尔塔的数据的URL手机使用了哈什值.如果索引的话,除了html/login等的汉方价的话,使用履历模式.Nestideルーターニキ\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\コンポーネントベースのコンポーネント-コンポーネント-コンポーネント-コンポーネント-コンポーネントブラウザを実装します。DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Nested Router</title>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script>
var User = {
template: `
<div>
User Component
<router-view></router-view>
</div>
`
};
var UserProfile = { template: '<p>User Profile Component</p>'};
var UserPost = { template: '<p>User Post Component</p>'};
var routes = [
{ path: '/user', component: User,
children: [
{
path: 'posts',
component: UserPost
},{
path: 'profile',
component: UserProfile
}
] }
];
var router = new VueRouter({
routes
});
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>/user之后,画面由/posts及/profile变化.名称ビュー(Name)前面の符号符号変位動作に対して网络上的路线是包括孩子构成部件在内的主页.[名]急進同形銃士実現部品同時間表示ビュー!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Nested Router</title>
</head>
<body>
<div id="app">
<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script>
var Body = { template: '<div>This is Body</div>'};
var Header = { template: '<div>This is Header</div>'};
var Footer = { template: '<div>This is Footer</div>'};
var router = new VueRouter({
routes: [
{
path: '/',
components: {
default: Body,
header: Header,
footer: Footer
}
}
]
});
var app = new Vue({
router
}).$mount('#app');
</script>
</body>
</html>使用的name项目,不是预约语,而是用户任意定义的值.名前;m1212测定指数定布拉乌萨要求特定数据的发送,服务员回答发送数据.WebアプリケーションHTTP通信の典型的な例はjQueryのajaxである.ajax:从服务器收到的数据表示时,不会把画面整体翻修,而是只能改变了画面的一部分的java屏幕技术.他の人、例えば、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私」、「私たち」、「私たち」、「私たち」、「私たち」、「私たち」、「私たち」、「私たち」、「私たち」、「私たち」、「私たち」、「私たち」、「私たち」、「私たち」、「私たち」、私たち、ㆉㆉㆉㆉㆉㆉㆉㆉㆉㆉㆉㆉㆉㆉㆉPromise Base的API手机Promise是对服务器的数据要求和收视等非同期论理处理有用的JavaScript网站.よよよよよよよよよよよよよよよよscript src="https://unpkg.com/axios/dist/axios.min.js「スクリプト」、「スクリプト」、「アイデア」、「CDN」の上の「\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\).catch//HTTP POST//HTTP要求のオプション属性定義
axios({
method: 'get',
url:「URLアドレス」
...
});axios API福马特API类型处理结果axios.get(「URLアドレス」)です.then().catch对这个URL Address的HTTP GET要求,正常接受的话then()的论理产生了艾勒,catch()的论理实行axios.post(「URLアドレス」)です.then().catch的URL Address是HTTP POST要求,如果正常接受的话then()的论理产生了艾勒的话,catch()的论理可以直接定义为axios({options属性})的HTTP要求的实行相关的详细属性。
Reference
この問題について([Doit!Vue.js]第4章), 我々は、より多くの情報をここで見つけました
https://velog.io/@gudwnsepdy/Do-it-Vue.js-4장
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について([Doit!Vue.js]第4章), 我々は、より多くの情報をここで見つけました https://velog.io/@gudwnsepdy/Do-it-Vue.js-4장テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol