【萬字長文】 Vue全家桶從入門到實戰，超詳細筆記整理 ( 二 ) （建議收藏）-有解無憂

- 13、es6的新特性
- 14、 Vue中組件(component)
- - 14.1、Vue標準開發模式
  - 14.2、組件作用
  - 14.3 、組件使用
  - - 14.3.1 、全域組件注冊
    - 14.3.2 、區域組件注冊
  - 14.4、Prop的使用
  - - 14.4.1、通過在組件上宣告靜態資料傳遞給組件內部
    - 14.4.2、通過在組件上宣告動態資料傳遞給組件內部
    - 14.4.3、prop的單向資料流
  - 14.5、組件中定義資料和事件使用
  - - - 14.5.1. 組件中定義屬于組件的資料
      - 14.5.2.組件中事件定義
  - 14.6、向子組件中傳遞事件并在子組件中呼叫該事件
  - 14.7、插槽的使用
- 15、Vue中路由 (Vue Router)
- - 15.1、路由
  - 15.2、作用
  - 15.3、使用路由
  - 15.4、router-link使用
  - 15.5、默認路由
  - 15.6、路由動態切換兩種方式
  - 15.7、路由中引數傳遞
  - 15.8、嵌套路由

13、es6的新特性

1、變數宣告 var 、let 、 const

var 作用: 使用這個關鍵字宣告變數是全域變數，容易出現變數混淆，
let 作用: 用來宣告一個區域變數，作用范圍：從定義開始，到新定義的代碼塊結束， [推薦使用]
const 作用：用來定義一個常量，作用：變數一旦被定義不能被修改，特殊說明：修飾number、字串時變數的值不能修改，修飾物件的時候物件的地址不能修改，

<script >
     function test(){
        for(let i = 0; i < 10; i++){
            console.log("function inner:",i);
        }
        //console.log("function out:",i);
        const name = "xiaochen"; //常量

        const user = {name:"小三"}; //const 修飾物件，物件地址不能改變 物件中的屬性可以隨意修改
        console.log(user.name);
        user.name = "小明";
        console.log(user.name);
    }
    test(); //呼叫函式
</script>

2、字串模板通過反引號使用字串模板

    let html = "<div>\n"+
                    "<h1>我是標簽</h1>\n"+
                    "<input type=\"text\" name=\"name\">\n"+
                    " <button>我是按鈕</button>\n"+
                "</div>\n";

     let html1 = `<div>
                    <h1>我是標簽</h1>
                    <input type="text" name="name">
                    <button>我是按鈕</button>
                </div>`;
     console.log(html);
     console.log(html1);

3、es6 function(){}

匿名函式自己存在自己this，簡化寫法為()=>(箭頭函式) , 箭頭函式沒有自己this，

4、物件定義方式

es5物件定義方式:

let name = "小陳";
let age = 23;
let bir = "2012-12-12";
const user = {name:name,age:age,bir:bir} ; //es5
console.log(user);

es6中物件的擴展：當物件屬性名和屬性賦值名一致時，可以省略變數名不寫，

let name = "小陳";
let age = 23;
let bir = "2012-12-12";
const stu = {name,age,bir} ; //es6
console.log(stu);

14、 Vue中組件(component)

14.1、Vue標準開發模式

1、vue推薦開發方式是sPA : Single Page (Web)Application （單頁面應用）

vue推薦開發方式是基于單頁面應用單頁面web應用

2、什么是sPA單頁面應用

單頁面應用:就是日后專案中只有一張頁面

3、為什么vue推薦開發方式sPA的開發方式?

引入vue js檔案
在現有頁面中創建vue實體物件一個頁面中只能存在一個vue實體一個，

vue推薦開發方式要求:一個應用中只能存在一個vue實體

4、使用現有手段嚴格遵循sPA存在問題?

現有開發方式導致專案中唯一一個頁面中代碼越來越多不利后續維護
現有開發方式導致專案中唯一一個頁面中完成全部業務功能,導致當前頁面每次加載速度非常慢

5、為了嚴格遵循sPa開發方式在vue中提供了vue組件component

組件:

組件減少vue根實體代碼量
一個組負賁完成專案中一個功能或者一組功實作業務功能隔離
組件還可以在vue實作復用

14.2、組件作用

組件作用: 用來減少Vue實體物件中代碼量,日后在使用Vue開發程序中,可以根據不同業務功能將頁面中劃分不同的多個組件,然后由多個組件去完成整個頁面的布局,便于日后使用Vue進行開發時頁面管理,方便開發人員維護，組件還可以實作共享和復用，

14.3 、組件使用

14.3.1 、全域組件注冊

說明:全域組件注冊給Vue實體,日后可以在任意Vue實體的范圍內使用該組件

//1.開發全域組件
<script>
    //開發全域組件
    //引數1. 組件名稱     引數2：指定組件內容的配置物件
    Vue.component('login',{
       template:"<div><h3>用戶登錄組件</h3></div>", //template:模板 用來書寫組件中html代碼 注意：template屬性必須存在一個根容器，有且只有一個根容器
    });

    Vue.component('register',{
        template: "<div><h3>用戶注冊組件</h3></div>"
    });
    const app = new Vue({
        el: "#app",
        data:{
        },
        methods:{
        },
        computed:{
        }
    });
</script>
//2.使用全域組件  在Vue實體范圍內
<div id="app">
    <!--使用全域組件：根據組件名稱使用全域組件-->
    <login></login>
	<register></register>
</div>

# 注意:
 - 1.Vue.component用來開發全域組件 引數1: 組件的名稱  引數2: 組件配置{}  template:''用來書寫組件的html代碼  template中必須有且只有一個root元素
 - 2.使用時需要在Vue的作用范圍內根據組件名使用全域組件
 - 3.如果在注冊組件程序中使用 駝峰命名組件的方式 在使用組件時 必須將駝峰的所有單詞小寫加入-線進行使用

14.3.2 、區域組件注冊

說明:通過將組件注冊給對應Vue實體中一個components屬性來完成組件注冊,這種方式不會對Vue實體造成累加

第一種開發方式

//區域組件登錄模板宣告
//定義登錄組件配置物件
const login = {  //定義一個登錄組件
    template:"<div><h3>用戶登錄區域組件</h3></div>"
}
const app = new Vue({
    el: "#app",
    data:{
    },
    methods:{
    },
    computed:{
    },
    components:{ //在這里注冊組件都為區域組件
        login,   //es5 login:login  es6 login,
        register:{
            template:"<div><h3>用戶注冊區域組件</h3></div>"
        }
    }
});
//區域組件使用 在Vue實體范圍內
<login></login>
<register></register>

第二種開發方式

//1.宣告區域組件模板  template 標簽 注意:在Vue實體作用范圍外宣告
    <template id="loginTemplate">
        <div>
            <h3>用戶登錄區域組件</h3>
            <input type="text">
        </div>
    </template>

//2.定義變數用來保存模板配置物件
    //定義登錄組件配置物件
    const login = {  //定義一個登錄組件
        template:"#loginTemplate"
    };

//3.注冊組件	
    const app = new Vue({
        el: "#app",
        data:{
        },
        methods:{
        },
        computed:{
        },
        components:{ //在這里注冊組件都為區域組件
            login,   //注冊登錄組件
        }
    });
 //4.區域組件使用 在Vue實體范圍內
	<login></login>

14.4、Prop的使用

作用:props用來給組件傳遞相應靜態資料或者是動態資料的

14.4.1、通過在組件上宣告靜態資料傳遞給組件內部

//1.宣告組件模板配置物件
      const login = {
        template: "<div><h3>登錄界面-{{title}}-{{count}}-{{age}}</h3></div>",
        data(){ //注意：在props中定義資料，不能在data中重復定義，如果重復定義，優先使用					props中資料為主
            return {
                loginTitle : this.title,
            };
        },
        props:['title','count','age'],  //props作用 用來接收使用組件時通過組件標簽傳遞的資料
    };

//2.注冊組件
// 如何實作父組件向子組件內部傳遞資料，并將資料在子組件中進行展示?注意：在vue中父組件向子組件傳遞資料可以使用 prop 屬性完成資料傳遞
    const app = new Vue({
       el:"#app",
       data:{
           msg: "Vue 中組件開發",

       },
       methods:{},
       computed:{},
       components:{
            login, //注冊組價
       }
    });

//3.通過組件完成資料傳遞
	<login title="歡迎訪問我們的系統!!!" count="11" age="23"></login>

# 總結:
			1.使用組件時可以在組件上定義多個屬性以及對應資料
			2.在組件內部可以使用props陣列生命多個定義在組件上的屬性名 日后可以在組件中通過{{ 屬性名 }} 方式獲取組件中屬性值
			3.在props中定義資料，不能在data中重復定義，如果重復定義，優先使用props中資料為主

14.4.2、通過在組件上宣告動態資料傳遞給組件內部

//1.宣告組件模板物件
    const login = {
        template: "<div><h3>登錄界面-{{title}}</h3></div>",
        data(){
            return {
            };
        },
        props:['title'],  //props作用 用來接收使用組件時通過組件標簽傳遞的資料
  	};
//2.注冊區域組件
    const app = new Vue({
           el:"#app",
           data:{
               msg: "Vue 中組件開發",
               name:"小李",
           },
           methods:{},
           computed:{},
           components:{
                login, //注冊組價
           }
        });

//3.使用組件
	  <login :title="name"></login>  //使用v-bind形式將資料系結Vue實體中data屬性,日后data屬性發生變化,組件內部資料跟著變化

14.4.3、prop的單向資料流

單向資料流:所有的 prop 都使得其父子 prop 之間形成了一個單向下行系結：父級 prop 的更新會向下流動到子組件中，但是反過來則不行，

所有的 prop 都使得其父子 prop 之間形成了一個單向下行系結：父級 prop 的更新會向下流動到子組件中，但是反過來則不行，這樣會防止從子組件意外改變父級組件的狀態，從而導致你的應用的資料流向難以理解，
額外的，每次父級組件發生更新時，子組件中所有的 prop 都將會重繪為最新的值，這意味著你不應該在一個子組件內部改變 prop，如果你這樣做了，Vue 會在瀏覽器的控制臺中發出警告，—摘自官網

14.5、組件中定義資料和事件使用

14.5.1. 組件中定義屬于組件的資料

//定義區域用戶串列組件配置物件
const users = {
    template:"<div><h3>用戶串列-{{count}}-{{name}}</h3></div>", //用來定義組件html內容
    data(){     //用來給當前組件定義一系列資料 注意：在組件中定義的資料只能在當前組件中可用
        return {
            count:0,
            name:"小李",
        };
    }
};

14.5.2.組件中事件定義

//定義區域用戶串列組件配置物件
const users = {
    template:"<div><h3>用戶串列-{{count}}-{{name}}-{{countSqrt}}</h3><button @click='changeCount'>+</button><ul><li v-for='item in items'>{{item}}</li></ul></div>", //用來定義組件html內容
    data(){     //用來給當前組件定義一系列資料 注意：在組件中定義的資料只能在當前組件中可用
        return {
            count:0,
            name:"小李",
            //items:["山西","北京","天津"],
            items:[],
        };
    },
    methods:{   //用來給當前組件定義一系列事件
        changeCount(){
            this.count++;
        }
    },
    computed:{  //用來給當前組件定義一系列計算屬性，用來對頁面中結果進行二次計算處理時候
        countSqrt(){
            return this.count*this.count;
        }
    },
    created(){ //組件已經注入了data、methods、computed 相關資料方法
        //發送請求
        /*axios.get("/xxx").then(res=>{
                this.items = res.data;
            });*/
        this.items=["山西","北京","天津"];
    },
};

# 總結	
		1.組件中定義事件和直接在Vue中定義事件基本一致 直接在組件內部對應的html代碼上加入@事件名=函式名方式即可
		2.在組件內部使用methods屬性用來定義對應的事件函式即可,事件函式中this 指向的是當前組件的實體

14.6、向子組件中傳遞事件并在子組件中呼叫該事件

在子組件中呼叫傳遞過來的相關事件必須使用 this.$emit(‘函式名’) 方式呼叫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">
       <h1>資訊：{{msg}} 年齡：{{age}}</h1>

       <login @aa="findAll" @test="test"></login>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    //如何將父組件中事件傳遞給子組件中 1.在使用事件時使用@別名=“傳遞事件名”  2.在組件中呼叫傳遞的事件時 this.$emit('別名')

    //定義一個登錄組件配置物件
    const login = {
        template: "<div><h3>用戶登錄-{{msg}}</h3><button @click='test'>點我觸發事件</button></div>",
        data(){
            return {
                msg:"我是子組件的資訊",
                age:23,
                user:{id:2,name:"小陳",age:23,bir:"2012-02-09"},
            };
        },
        methods:{
            test(){
                alert('子組件中定義的事件...');
                //呼叫父組件中findAll事件 aa 事件名：
               // this.$emit('aa');   //$emit用來呼叫父組件中相關事件
                this.$emit('test',this.msg,this.age,this.user);   //$emit用來呼叫父組件中相關事件,并傳遞引數
            }
        }
    };
    const app = new Vue({
       el:"#app",
       data:{
           msg: "Vue 中組件開發",
           age:23,
           user:{id:1,name:"小吳",age:12},
       },
       methods:{
           findAll(){
               alert('父組件中定義的事件...');
           },
           test(msg,age,user) {
               alert('父組件中定義test的事件....'+msg);
               console.log("msg:",msg);
               console.log("age",age);
               console.log("user",user);
               this.msg = msg;
               this.age = age;
           }
       },
       computed:{},
       components:{
            login, //注冊組件
       }
    });
</script>

14.7、插槽的使用

怎么理解插槽？

slot相當于一個空標簽，通過vue可以實作動態改變值和樣式，把一塊區域內容抽了出來可以實作復用，就和Java里封裝的工具類一樣，
插槽就是子組件中的提供給父組件使用的一個占位符，
我們在構建頁面程序中一般會把用的比較多的公共的部分抽取出來作為一個單獨的組件，但是在實際使用這個組件的時候卻又不能完全的滿足需求，我希望在這個組件中添加一點東西，這時候我們就需要用到插槽來分發內容，
通俗易懂的講，slot具有“占坑”的作用，在子組件占好了位置，那父組件使用該子組件標簽時，新添加的DOM元素就會自動填到這個坑里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">
       <h1>{{msg}}</h1>
        <!--vue使用組件-->
       <login><h5 slot="aa">我是用戶自定義aa內容</h5><h5 slot="bb">我是用戶自定義bb內容</h5></login>
        <hr>
        <login><button>+++</button></login>
        <hr>
        <login></login>
        <hr>
    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>

    //slot：插槽   作用：用來擴展自定義組件讓組件變得更加靈活，用來個性化定制自己的組件  注意：插槽必須配合組件才能使用
    const login = {
        template: "<div><slot name='aa'><span>默認擴展</span></slot><h3>用戶登錄界面</h3><slot name='bb'><span>默認擴展</span></slot></div>",
    };
    const app = new Vue({
       el:"#app",
       data:{
           msg:"slot 插槽的使用"
       },
       methods:{
       },
       computed:{},
       components: {
           login,
       },
    });
</script>

15、Vue中路由 (Vue Router)

15.1、路由

路由:根據請求的路徑按照一定的路由規則進行請求的轉發從而幫助我們實作統一請求的管理

15.2、作用

用來在vue中實作組件之間的動態切換

15.3、使用路由

1、引入路由

<!--cdn方式-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  //vue 路由js
<!--本地引入-->
<script src="js/vue-router.js"></script>

2、創建組件物件

//創建組件配置物件
const users = {
    template:"<div><h3>用戶管理</h3></div>"
};

const emps = {
    template: "<div><h3>員工管理</h3></div>"
}

3、定義路由物件的規則

const router = new VueRouter({
    routes:[
        {path:'/users',component:users}, //用來定義具體得的某個組件路由規則 path:用來指定對應請求路徑 component:指定路徑對應的組件
        {path:'/emps', component:emps }  //用來定義一些規則
    ]
});

4、將路由物件注冊到vue實體

const app = new Vue({
    el:"#app",
    data:{
        msg:"vue 中router(路由)的使用",
    },
    methods:{},
    computed:{},
    components:{},  //注冊區域組件
    router:router,  //用來注冊路由配置
});

5、在頁面中顯示路由的組件

<!--指定路由組件在哪里展示 router-view 標簽：作用：用來展示路由對應組件顯示的位置-->
<router-view></router-view>

5、根據鏈接切換路由

<a href="#/users">用戶管理</a>
<a href="#/emps">員工管理</a>

15.4、router-link使用

作用: 用來替換我們在切換路由時使用a標簽切換路由

好處: 就是可以自動給路由路徑加入#不需要手動加入

<!--router-link 標簽： 作用：用來替換a標簽 好處：書寫路徑時不需要顯示加入# to: 用來指定路由路徑 tag：默認為a標簽 用來指定router-link底層渲染標簽-->
<router-link to="/users" tag="a">用戶管理(link)</router-link>
<router-link to="/emps"  tag="a">員工管理(link)</router-link>

# 總結:
	1.router-link 用來替換使用a標簽實作路由切換 好處是不需要書寫#號直接書寫路由路徑
	2.router-link to屬性用來書寫路由路徑   tag屬性:用來將router-link渲染成指定的標簽

15.5、默認路由

作用: 用來在第一次進入界面是顯示一個默認的組件

const router = new VueRouter({
    routes:[
        //{ path:'/',component:login},
        {path:'/',redirect:'users' },     //默認路由規則 redirect:(路由路徑重定向)
        {path:'/users',component:users},  //用戶組件路由規則
        {path:'/emps', component:emps }   //員工組件路由規則
    ]
});

15.6、路由動態切換兩種方式

方式一：通過使用標簽方式直接進行路由切換

<!--1.通過使用標簽方式直接進行路由切換-->
<a href="#/users">用戶管理</a>
<a href="#/emps">員工管理</a>
<router-link to="/users" tag="a">用戶管理(link)</router-link>
<router-link to="/emps"  tag="a">員工管理(link)</router-link>

方式二：通過js代碼的方式進行動態切換路由

<!--2.通過js代碼的方式進行動態切換路由 this.router.push("切換的路由路徑")-->
<button @click="test">測驗動態路由</button>

const app = new Vue({
    el:"#app",
    data:{
        msg:"vue 中router(路由)的使用 route-link標簽的使用",
    },
    methods:{
        test(){
            console.log("test");
            //this.$router.push("/emps"); //代表切換路由路徑
            //this.$router.push({path:'/emps'}); //切換路由
            this.$router.push({name:"emps"}); //名稱方式切換路由        [推薦]
        },
    },
    computed:{},
    components:{},  //注冊區域組件
    router,     //注冊路由
});

15.7、路由中引數傳遞

第一種方式傳遞引數傳統方式

1、通過?號形式拼接引數

<!--1.獲取？后傳遞引數 this.route.query.key.?后面引數key-->
<router-link to="/users?deptid=21name=李四">用戶管理</router-link>

2、組件中獲取引數

const users = {
    template:"<div><h1>用戶管理</h1></div>",
    data(){
        return {};
    },
    methods: {},
    created(){
        //獲取路由路徑中引數 1.獲取queryString(deptid=21)中傳遞引數
        //this.$route 當前路由物件
        //this.$router 路由管理器物件
        console.log("deptid:",this.$route.query.deptid);
        console.log("name:",this.$route.query.name);
    }
};

第二種方式傳遞引數 restful

1、通過使用路徑方式傳遞引數

<!--2.獲取路由路徑中引數 rest 方式引數獲取  this.$route.params.路徑中別名-->
<router-link to="/emps/11/王五">員工管理</router-link>
const router = new VueRouter({
    routes:[      
        {path:'/emps/:id/:name', name:'emps',component:emps }   //員工組件路由規則
    ]
});

2、組件中獲取引數

const emps = {
    template: "<div><h1>員工管理</h1></div>",
    data(){
        return {};
    },
    methods: {},
    created() {
        console.log("id:",this.$route.params.id); //獲取路徑中的引數
        console.log("name:",this.$route.params.name); //獲取路徑中的引數
    }
}

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>

        <!--切換路由-->
        <!--1.獲取？后傳遞引數 this.route.query.key.?后面引數key-->
        <router-link to="/users?deptid=21name=李四">用戶管理</router-link>
        <!--2.獲取路由路徑中引數 rest 方式引數獲取  this.$route.params.路徑中別名-->
        <router-link to="/emps/11/王五">員工管理</router-link>

        <!--router-view 顯示路由組件-->
        <router-view></router-view>

    </div>
</body>
</html>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //創建組件配置物件
    const users = {
        template:"<div><h1>用戶管理</h1></div>",
        data(){
            return {};
        },
        methods: {},
        created(){
            //獲取路由路徑中引數 1.獲取queryString(deptid=21)中傳遞引數
            //this.$route 當前路由物件
            //this.$router 路由管理器物件
            console.log("deptid:",this.$route.query.deptid);
            console.log("name:",this.$route.query.name);
        }
    };

    const emps = {
        template: "<div><h1>員工管理</h1></div>",
        data(){
            return {};
        },
        methods: {},
        created() {
            console.log("id:",this.$route.params.id); //獲取路徑中的引數
            console.log("name:",this.$route.params.name); //獲取路徑中的引數
        }
    }

    //創建路由物件并定義路由規則
    const router = new VueRouter({
        routes:[
            {path:'/',redirect:'users' },     //默認路由規則 redirect:(路由路徑重定向)
            {path:'/users',name:'users',component:users},  //用戶組件路由規則   name:路由名稱 必須唯一
            {path:'/emps/:id/:name', name:'emps',component:emps }   //員工組件路由規則
        ]
    });

    const app = new Vue({
       el:"#app",
       data:{
           msg:"vue 中router(路由)的使用 route-link標簽的使用",
       },
       methods:{

       },
       computed:{},
       components:{},  //注冊區域組件
       router,     //注冊路由
    });
</script>

15.8、嵌套路由

1、宣告最外層和內層路由

<template id="product">
    <div>
        <h1>商品管理</h1>

        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/edit">商品編輯</router-link>

        <router-view></router-view>

    </div>
</template>

//宣告組件模板
const product={
  template:'#product'
};

const add = {
  template:'<h4>商品添加</h4>'
};

const edit = {
  template:'<h4>商品編輯</h4>'
};

2、創建路由物件含有嵌套路由

const router = new VueRouter({
        routes:[
            {
                path:'/product',
                component:product,
                children:[
                    {path:'add',component: add},
                    {path:'edit',component: edit},
                ]
            },
        ]
    });

3、注冊路由物件

const app = new Vue({
    el: "#app",
    data: {},
    methods: {},
    router,//定義路由物件
});

4、測驗路由

<router-link to="/product">商品管理</router-link>
<router-view></router-view>

案例練習：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列課程</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>

        <!--路由鏈接-->
        <router-link to="/products">商品管理</router-link>
        <!--顯示路由組件-->
        <router-view></router-view>
    </div>
</body>
</html>
<template id="productsTemplate">
    <div>
        <div><h3>商品串列</h3></div>
        <a href="#/products/add">添加商品資訊</a>
        <table border="1">
            <tr>
                <th>編號</th>
                <th>名稱</th>
                <th>價格</th>
                <th>生產日期</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>短袖</td>
                <td>60.88</td>
                <td>2021-06-09</td>
                <!--<th><a href="">洗掉</a><a href="#/products/edit">修改</a></th>-->
                <td><a href="">洗掉</a><a href="javascript:;" @click.prevent="editRow({id:1,name:'小陳'})">修改</a></td>
            </tr>
        </table>
        <!--router-view 用來展示子路由組件-->
        <router-view></router-view>
    </div>

</template>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue-router.js"></script>
<script>

    //創建組件配置物件
    const products = {
        template:"#productsTemplate",
        data(){
            return {};
        },
        methods:{
            editRow(user){
                console.log(user);
                this.$router.push({path:'/products/edit',query:user}); //切換路由路徑 通過query(?)
            }
        }
    };

    //創建添加商品資訊子組件
    const add = {
        template: "<div from action=''>商品名稱: <input type='text'><br>商品價格: <input type='text'><br> <input type='button' value='保存商品'></div>"
    }

    const edit = {
        template: "<div from action=''>商品名稱: <input type='text' v-model='user.id'><br>商品價格: <input type='text' v-model='user.name'><br> <input type='button' value='確認修改'></div>",
        data() {
            return {
                user:{},
            };
        },
        methods:{},
        created(){
            console.log("edit: ",this.$route.query);
            this.user = this.$route.query;
        }
    }
    //創建路由物件
    const router = new VueRouter({
        routes:[
            {path:'/',redirect:'/products' },  //默認路由
            {
                path:'/products',
                name:'products',
                component:products,
                children:[ //定義子路由 注意：子路由的path屬性不能使用'/'開頭
                    {path:"add",component:add},
                    {path:"edit",component:edit},
                ]
            },

        ]
    });

    const app = new Vue({
       el:"#app",
       data:{
           msg:"vue 中router 中嵌套路由的使用",
       },
       methods:{},
       computed:{},
       components:{
           products,
       },
       router,  //注冊路由
    });
</script>

運行截圖：

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/291360.html

標籤：其他

上一篇：三個月斬獲阿里offer，我做對了哪些事情

下一篇：【OpenCV】??高手勿入! 半小時學會基本操作 15?? 直方圖

【萬字長文】 Vue全家桶從入門到實戰，超詳細筆記整理 ( 二 ) （建議收藏）

目錄