個人的な方向性 - Vue クイック スタート
1. はじめに
-
Vue (/vjuː/ と発音、ビューに似ています) は、ユーザー インターフェイスを構築するための進歩的なフレームワークです。他の大きなフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。Vue のコア ライブラリはビュー レイヤー (HTML+CSS+JS) のみに焦点を当てており、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、最新のツールチェーンやさまざまなサポート ライブラリと組み合わせると、Vue は複雑なシングルページ アプリケーションを実行することもできます。(公式紹介)
-
Vueは中国人のYou Yuxiによって開発されました。
-
ビュー層に加えて、フロントエンドにはネットワーク通信 (通常は axios を使用)、ページジャンプ (vue-router)、および状態管理 (vuex) もあります。
関連する原則:
- Soc: (関心事の分離) Soc 原則: 関心事の分離の原則は、コンピューティング フロントエンドで使用される最も基本的な原則です。もちろんVueもそれに従う
- MVVM: Vue.js は、View レイヤーに重点を置いた MVVM スタイルの双方向データ バインディングを提供する Javascript ライブラリです。そのコアは MVVM の VM、つまり ViewModel です。ViewModel は、ビューとモデルを接続してビューとデータの一貫性を確保する役割を担っており、この軽量アーキテクチャにより、フロントエンド開発がより効率的かつ便利になります。
MVVM:
Model-View-ViewModel —— イベント駆動型プログラミング (主な目的はビューとモデルを分離することです)
ViewModel 双方向バインディング層: ViewModel によってカプセル化されたデータ モデルには、状態と動作の 2 つの部分が含まれます。ビュー、およびモデル層のデータ モデルには状態のみが含まれます。
2. 初級編（基礎文法）
一般的にはHTMLにVueを導入することで直接Vueを利用することができます。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script><!--或者下面的也行-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
1. 最初のエントリ
基本的な HTML 形式を使用します。コードには <body> 部分のみが含まれます。
<body>
<!--view层 模板-->
<div id="app">
{
{
message}}//从data中取数据
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
</script>
2.v-バインド
<!--view层 模板-->
<div id="app">
<span v-bind:title="message">
鼠标悬停查看动态绑定的信息
</span>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
message:"hello,vue!"
}
});
</script>
3. ジャッジメントループ
判断：
<!--view层 模板-->
<div id="app">
<h1 v-if="ok">True</h1>
<h1 v-else>No</h1>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
ok:true
}
});
</script>
サイクル：
<!--view层 模板-->
<div id="app">
<h1 v-if="type==='A'">A</h1>
<h1 v-else-if="type==='B'">B</h1>
<h1 v-else-if="type==='C'">C</h1>
<h1 v-else>D</h1>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
type:'A'
}
});
</script>
4. イベントバインディング
<!--view层 模板-->
<div id="app">
<button v-on:click="sayHi">click here</button>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data: {
message:"大海"
},
methods:{
//
//方法必须定义在Vue的Method对象种
sayHi:function (){
alert(this.message)
}
}
});
</script>
5. データ双方向バインディング
以下に 2 つの例を示します
<!--view层 模板-->
<div id="app">
性别：
<input type="radio" name="sex" value="男" v-model="person" />男
<input type="radio" name="sex" value="女" v-model="person" />女
<p>
选中了:{
{
person}}
</p>
<br />
输入的文本:<textarea v-model="message" ></textarea>{
{
message}}
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
message:"",
person:''
}
});
</script>
ドロップダウン ボックスの双方向バインド:
<!--view层 模板-->
<div id="app">
下拉框:
<select name="" id="" v-model="selected">
<option value="" disabled>---请选择---</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<span>value:{
{
selected}}</span>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
//Model:数据
data:{
selected:''
}
});
</script>
6.vueコンポーネント
コンポーネントは再利用可能な Vue インスタンス (再利用可能なテンプレート)
<!--
“绑定item的值”也是一个变量，命名为item_bind什么的也行，这里只是方便区别
-->
<!--view层 模板-->
<div id="app">
<!--组件:传递给组件中的值:props-->
<person v-for="item in items" v-bind:绑定item的值="item"></person>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
//定义一个Vue组件component
Vue.component("person",{
props:["绑定item的值"],
template:'<li>{
{绑定item的值}}</li>'
});
var vm=new Vue({
el:"#app",
//Model:数据
data:{
items:["java","linux","mac"]
}
});
</script>
7. Axios 非同期通信
Axios はブラウザや NodeJS で利用できるオープンソースの非同期通信フレームワークであり、主な機能は AJAX 非同期通信を実現することです。
スクリプトを導入する必要があります:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
新しい data.json ファイルを作成する
{
"name": "java",
"url": "https://www.baidu.com/",
"page": 1,
"isNonProfit": true,
"address": {
"street": "含光门",
"city": "陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "csdn",
"url": "https://www.csdn.net/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
デモ.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!--view层 模板-->
<!--
ps:这里打开网页会闪烁： {
{
message.name}}------------》java 加载
手动解决:
<style>
[v-cloak]{
display: none;
}
</style>
打开网页 白屏------------》java 加载
-->
<div id="vue" v-cloak>
<div>{
{
message.name}}</div>
<div>{
{
message.address.city}}</div>
<a v-bind:href="message.url">百度</a>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm=new Vue({
el:"#vue",
data(){
return{
message:{
/*这里直接 message:'' 不写也可以 */
name:null,
city:null,
address:{
street:null,
city:null,
country:null
}
}
}
},
mounted(){
//钩子函数 链式编程
axios.get('./data.json').then(response=>(this.message=response.data));
}
});
</script>
</body>
</html>
8. 計算されたプロパティ
<!--view层 模板-->
<div id="app">
<!--
currentTime1()：是方法，在网页中console.log中调用 vm.currentTime1() 会显示不同的值
currentTime2:是属性 在网页中console.log中调用 vm.currentTime2() 会报错，因为它不是方法，重复调用vm.currentTime2值不会变化
因为currentTime2是属性，计算出来后保存到了内存中 ，和缓存类似，如果 currentTime2内属性值变化 例如：在网页控制台中输入：vm.message="3"， currentTime2
会重新计算
-->
<!--
计算属性的主要特征就是为了将不经常变化的计算结果进行缓存，以节约我们的习题开销
-->
<P>currentTime1:{
{
currentTime1()}}</P>
<P>currentTime2:{
{
currentTime2}}</P>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello,world"
},
methods:{
currentTime1:function (){
return Date.now(); //返回当前一个时间戳
}
},
computed:{
// 计算属性: methods. computed 方法不能重名 vm.currentTime2 is not a function currentTime2是属性
currentTime2:function (){
this.message;
return Date.now(); //返回当前一个时间戳
}
}
});
</script>
9. スロットスロット
<!--view层 模板-->
<div id="app">
<!--
网页输出：
<p>列表数据</p>
<ul>
<li>鲁迅</li>
<li>周树人</li>
<li>狂人</li>
</ul>
-->
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in names" :item="item"></todo-items>
</todo>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
//slot:插槽
Vue.component("todo",{
template:
'<div>' +
'<slot name="todo-title"></slot>' +
'<ul>' +
'<slot name="todo-items"></slot>' +
'</ul>' +
'</div>'
});
Vue.component("todo-title",{
props:['title'],
template: '<div style="color: blue">{
{title}}</div>'
});
Vue.component("todo-items",{
props:['item'],
template: '<li>{
{item}}</li>'
});
var vm=new Vue({
//Vue有先后顺序，这个要放到最后，不然会报错
el:"#app",
//Model:数据
data:{
title:"列表",
names:['鲁迅','周树人','狂人']
}
});
</script>
10. カスタムイベントコンテンツの配信
<!--view层 模板-->
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in names" :item="item"
v-bind:绑定index的值="index" v-on:绑定remove方法="removeItems(index)"></todo-items>
</todo>
</div>
<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
//slot:插槽
Vue.component("todo",{
template:
'<div>' +
'<slot name="todo-title"></slot>' +
'<ul>' +
'<slot name="todo-items"></slot>' +
'</ul>' +
'</div>'
});
Vue.component("todo-title",{
props:['title'],
template: '<div style="color: blue">{
{title}}</div>'
});
Vue.component("todo-items",{
props:['item','绑定index的值'],
//只能绑定当前组件的方法
template: '<li>{
{绑定index的值}}--{
{item}} <button @click="remove">删除</button></li>',
methods:{
remove:function (绑定index的值){
//this.$emit() 自定义事件分发
this.$emit('绑定remove方法',绑定index的值)
}
}
});
var vm=new Vue({
//据说Vue又先后顺序，这个要放到最后，不然会报错？？ 未验证
el:"#app",
//Model:数据
data:{
title:"列表",
names:['鲁迅','周树人','狂人']
},
methods: {
removeItems:function (index){
this.names.splice(index,1); //一次删除下标为index的一个元素
}
}
});
</script>
3. Vue-cli (vue スキャフォールディング)
Vue CLI は、Vue.js に基づいた迅速な開発のための完全なシステムです
。 vue-cli をグローバルにインストールします。
npm install -g vue-cli
いいえ、cnpm install -g vue-cli : vue -Vでバージョンを確認します。
1. 初期化
新しい空のフォルダーを作成し、空のフォルダーの場所の cmd 入力を開きます。
vue init webpack myvue
そうでない場合は、管理者で cmd を開く必要があります
詳細:
vue init webpack myvue(ファイル名)
ロード後、cmd はプロジェクトの基本情報を表示し、オプションを次の順序で入力できます。 デフォルト デフォルトの作成者名 最初のオプション (スタンドアロン) no no no no no,i
次に、myvue プロジェクトが生成され、cmd が /myvue フォルダーに切り替わります
。ターミナル入力:
npm 実行開発
Web ページが http://localhost:8080 で開き、空の vue-cli が正常に実行されます。
2.idea は Vue コンポーネント オプションを使用せずに Vue プラグインをインストールします
ここでは、Vue.js プラグインを直接ダウンロードするだけで、アイデアを使用して Vue を開発できます。
ダウンロード後、新しいビルドにコンポーネント オプションに対する解決策がない場合:
- ファイルをクリックして設定を開き、エディターを展開してファイルとコードのテンプレートを見つけます
- Vue の単一ファイル コンポーネントを見つけて選択し、[コピー] をクリックします
- コピーすると下部に新しいファイルが表示されます
- 名前を「Vue Component」に変更し、コード内の「COMPONENT_」を削除して、最後に「OK」をクリックして終了します。
四、vue-router
Vue Router は、Vue.js の公式ルーティング マネージャーです(新しいウィンドウが開きます)。
コードの簡単な例を示します:
同じフレームを持つ Web サイトが多数あり、ボタンを押すとメイン表示領域のみが更新されます。同じ効果を実現するために vue-router を使用します。
空の vue-cli プロジェクト内:
vue-router ルートをダウンロードします。
npm install vue-router --save-dev
1. 空の vue-cli ファイルの src/main.js でルーティングを構成します。
import Vue from 'vue'
import App from './App'
import router from './router' //自动扫描里面的路由配置
Vue.config.productionTip = false // 阻止启动生产消息,默认的
new Vue({
el: '#app',
//配置路由
router,
components: {
App },
template: '<App/>'
})
3 つのページと 1 つのメイン ページができました。メイン ページのボタンを使用して、他の 3 ページを切り替えて表示したいと思います。
2. 3 つのページ (コンポーネント):
Content.vue:
<template>
<h1>一些乱七八糟的内容</h1>
</template>
<script>
export default {
name: "Content"
}
</script>
<style scoped> /* scoped 当前页面起效 */
</style>
人物ビュー:
<template>
<h2>person</h2>
</template>
<script>
export default {
name: "person"
}
</script>
<style scoped>
</style>
メインビュー:
<template>
<h1>首页</h1>
</template>
<script>
export default {
name: "Main"
}
</script>
<style scoped>
</style>
3. エクスポート ルートを設定します。
src/ の下に新しいファイル router/index.js を作成します。
import Vue from "vue";
import VueRouter from "vue-router";
import Content from '../components/Content';
import Main from '../components/Main';
import Person from '../components/Person';
//安装路由
Vue.use(VueRouter);
//配置导出路由
export default new VueRouter({
routes:[
{
//路由路径
path:'/main',
name:'content',
//跳转的组件
component:Main
},
{
//路由路径
path:'/content',
name:'content',
//跳转的组件
component:Content
},
{
//路由路径
path:'/person',
//name可以不用
//跳转的组件
component:Person
}
]
});
4. ホームページ:
<template>
<div id="app">
<h1>Vue-Router</h1>
<router-link to="/main">首页</router-link>
<router-link to="/content">内容页</router-link>
<router-link to="/person">个人页</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
/*默认的主页css，删掉也行*/
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
次に、ターミナルに直接入力します (現在のルート ディレクトリに切り替えるため):
npm run dev
プロジェクトを実行します (デフォルト: http://localhost:8080)
ポート 8080 が占有されている場合、ポートは移動されます。
五、Vue-ElementUI
ElementUI: Vueに適したUIフレームワーク
公式Webサイトコンポーネント
1. 事前準備:
- Webpack プロジェクトの初期化
vue init webpack hello-vue(ファイル名) - cd hello-vue - ディレクトリを切り替えます
- vue-router をインストールします
cnpm install vue-router --save-dev を使用して
現在のディレクトリを保存します - element-ui
cnpm i element-ui -sをインストールします
インストールはnpm installに依存します- sass ローダーをインストールする
cnpm install sass-loader node-sass --save-dev - テストを開始する
npm run dev - アイデアオープンプロジェクト
2. シンプルなプロジェクトコード
新しい router と views フォルダーを src/ の下に作成します。
新しい index.js ファイルを router/ の下に作成します。
新しい Main.vue および Login.vue ファイルを views/ の下に作成します。
完全なプロジェクトを最初にここに示し、関連するコードを紹介します。
事前に axios をインストールし、ターミナル入力: cnpm install --save axios vue-axios
(1). ルートディレクトリ (/hello-vue) に新しい /static/mock/data.json を作成します。
{
"name":"person",
"url": "https://www.baidu.com/",
"page": 1,
"isNonProfit":true,
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
(2). src/main.js ファイルを変更します。
import Vue from 'vue'
import App from './App'
import router from './router'
//导入element-ui和css文件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios);
Vue.use(router);
Vue.use(ElementUI);
new Vue({
el: '#app',
router,
render:h=>h(App) //ElementUI
})
(3).コンポーネント
メインビュー：
<template>
<div>
<el-container>
<el-aside width="200px">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<!--插入的地方-->
<!-- <router-link to="/user/profile">个人信息</router-link> -->
<!-- name-传组件名 params传递参数，需要对象:v-bind (:to) -->
<router-link :to="{name: 'UserProfile',params: {id: 1}}">个人信息</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<!--插入的地方-->
<router-link to="/user/list">用户列表</router-link>
</el-menu-item>
<el-menu-item index="1-3">
<router-link to="/goHome">回到首页</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
<el-menu-item-group>
<el-menu-item index="2-1">分类管理</el-menu-item>
<el-menu-item index="2-2">内容列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-caret-right"></i>系统管理</template>
<el-menu-item-group>
<el-menu-item index="3-1">用户设置</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <span>{
{
name}}</span>-->
</el-header>
<el-main>
<!--在这里展示视图-->
<router-view />
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
// props:['name'],
name: "Main"
}
</script>
<style scoped > /* <style scoped lang="scss"> lang="scss" 项目没有对scss进行支持 */
.el-header {
background-color: #25b1ff;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
Login.vue:
<template>
<div>
<el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
<h3 class="login-title">欢迎登录</h3>
<el-form-item label="账号" prop="username">
<el-input type="text" placeholder="请输入账号" v-model="form.username"/>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" placeholder="请输入密码" v-model="form.password"/>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button>
</el-form-item>
</el-form>
<el-dialog title="温馨提示" :visible.sync="dialogVisiable" width="30%" :before-close="handleClose">
<span>请输入账号和密码</span>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
name: "Login",
data(){
return{
form:{
username:'',
password:''
},
//表单验证，需要在 el-form-item 元素中增加prop属性
rules:{
username:[
{
required:true,message:"账号不可为空",trigger:"blur"}
],
password:[
{
required:true,message:"密码不可为空",tigger:"blur"}
]
},
//对话框显示和隐藏
dialogVisible:false
}
},
methods:{
onSubmit(formName){
//为表单绑定验证功能
this.$refs[formName].validate((valid)=>{
if(valid){
//使用vue-router路由到指定界面，该方式称为编程式导航
this.$router.push('/main');
/*this.$router.push('/main/'+this.form.username);*/
}else{
this.dialogVisible=true;
return false;
}
});
}
}
}
</script>
<style scoped>/* <style lang="scss" scoped> lang="scss" 有问题 因为项目没有对scss进行支持，需要另外安装第三方包的依赖来对scss进行解析 */
.login-box{
border:1px solid #DCDFE6;
width: 350px;
margin:180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px #909399;
}
.login-title{
text-align:center;
margin: 0 auto 40px auto;
color: #303133;
}
</style>
NotFound.vue:
<template>
<div>
<h1>404，没有找到该页面</h1>
</div>
</template>
<script>
export default {
name: " NotFound"
}
</script>
<style scoped>
</style>
(3-2).コンポーネント
新しい user/List.vue と Profile.vue List.vue をviews/ の下に作成します。
<template>
<h1>用户列表</h1>
</template>
<script>
export default {
name: "UserList"
}
</script>
<style scoped>
</style>
プロフィール.ビュー:
<template>
<div>
<h1>个人信息</h1>
<!-- {
{
$route.params.id }}-->
{
{
id}}
</div>
</template>
<script>
export default {
props:['id'],
name: "UserProfile",
/* 过滤器 进入路由之前 */
beforeRouteEnter:(to,from,next)=>{
next(vm => {
//跳入下一页面 next('/path’);跳入另一个路由 next(false)返回原来的页面 next((vm)=>{})仅在beforeRouteEnter中可用。vm是组件实例
vm.getData(); //进入路由之前执行getData
});
},
/* 在进入路由后*/
beforeRouteLeave:(to,from,next)=> {
next();
},
methods:{
getData:function (){
this.axios({
method:'get',
url:'http://localhost:8080/static/mock/data.json'
}).then(function (response){
console.log(response)
})
}
}
}
</script>
<style scoped>
</style>
(4)index.js（設定ルーティング）
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../views/Main'
import Login from "../views/Login"
import UserList from '../views/user/List'
import UserProfile from "../views/user/Profile"
import NotFound from "../views/NotFound"
Vue.use(Router);
export default new Router({
mode:'history',
routes:[
{
path:'/login',
component:Login
},
{
// path:'/main/:name',
path:'/main/',
component:Main, //嵌套路由
props:true,
children:[
/*{path:'/user/profile',component:UserProfile},*/
{
path:'/user/profile/:id' , name:'UserProfile',component:UserProfile,props:true},
{
path:'/user/list',component:UserList}
]
},{
path:'/goHome',
redirect: '/main'
},{
path:'*',
component: NotFound
}
]
});
ここでプロジェクトを実行できます。ターミナル入力: npm run dev
webpage open: http://localhost:8080/login と
入力してログインし、次のように入力します: http://localhost:8080/main
3. コードの詳細
(1). パラメータの受け渡し
1>>Main.vue で:
<!-- <router-link to="/user/profile">个人信息</router-link> -->
<!-- name-传组件名 params传递参数，需要对象:v-bind (:to) -->
<router-link :to="{name: 'UserProfile',params: {id: 1}}">个人信息</router-link>
id: 1 — 渡す必要があるパラメータです
2>>
index.js Mainの子サブルートのパスを変更します
{パス:'/user/profile/:id' 、名前:'ユーザープロファイル'、コンポーネント:ユーザープロファイル}
3>> Profile.vue コンポーネントに渡した後、
{
{ $route.params.id }} を使用してページに表示します
ps: テンプレートの下に存在できるラベルは 1 つだけです
(2) パラメータの小道具のデカップリングを渡す
1>>Main のサブルートの子を変更し、props:true を追加します。
2>>Profile.vue のエクスポートに props:['id'] を追加します
3>> Profile.vue 内の { { $route.params.id }} を { {id}}に置き換えます
(3) リダイレクト
Index.js のエクスポートのルートに追加します:
{ path:'/goHome', redirect: '/main' }
Main.vueを追加
<el-menu-item index="1-3">
<router-link to="/goHome">回到首页</router-link>
</el-menu-item>
(4) ログインページに接続します
これは後続のテストに影響するため、
使用後に 1>>modify login.vue をコメントアウトします。
/*this.$router.push('/main');*/
this.$router.push('/main/'+this.form.username);
2>>index.jsを変更する
path:'/main/:name',
// path:'/main/',
component:Main, //嵌套路由
props:true,
3>>Main.vue を変更し、
<script> のエクスポートに props:['name'] を追加し
、Main.vue の </el-header> の最後に追加します。
</el-dropdown>
<span>{
{
name}}</span>
</el-header>
このとき、ログイン時に入力したユーザー名がmianページに表示されます。
(5) ルーティング
Index.js のエクスポートは、
# のないパスのスタイルである mode:'history' で始まります。
デフォルトは、# を含むパス (URL) である mode:'hash' です。
(6)404
エラー ページを構成します
。index.js ページのエクスポート ルートの最後に構成します。
{
path:'*',
component: NotFound
}
*、ルート内のパスに表示されるアドレスを除き、その他はすべてエラーにジャンプします
routes:[
{
path:'/login',
component:Login
},
{
// path:'/main/:name',
path:'/main/',
component:Main, //嵌套路由
props:true,
children:[
/*{path:'/user/profile',component:UserProfile},*/
{
path:'/user/profile/:id' , name:'UserProfile',component:UserProfile,props:true},
{
path:'/user/list',component:UserList}
]
},{
path:'/goHome',
redirect: '/main'
},{
path:'*',
component: NotFound
}
]
(7) ルーティングフック
Axios をインストールする必要があります (上記でインストールされていない場合: cnpm install --save axios vue-axios)
Profile.vue を変更します
export default {
props:['id'],
name: "UserProfile",
/* 过滤器 进入路由之前 */
beforeRouteEnter:(to,from,next)=>{
next(vm => {
//跳入下一页面 next('/path’);跳入另一个路由 next(false)返回原来的页面 next((vm)=>{})仅在beforeRouteEnter中可用。vm是组件实例
vm.getData(); //进入路由之前执行getData
});
},
/* 在进入路由后*/
beforeRouteLeave:(to,from,next)=> {
next();
},
methods:{
getData:function (){
this.axios({
method:'get',
url:'http://localhost:8080/static/mock/data.json'
}).then(function (response){
console.log(response)
})
}
}
}
メイン ページのこの時点で、コンソールを開いて data.json 内のデータを確認します。