vue-router是Vue.js中的一個(gè)路由插件，集成了不同的內(nèi)容，主要用來(lái)實(shí)現(xiàn)構(gòu)建單頁(yè)應(yīng)用。路由主要用來(lái)設(shè)置單頁(yè)訪問(wèn)路徑，并將路徑和頁(yè)面關(guān)聯(lián)起來(lái)。 示例操作步驟 第一步：準(zhǔn)備工作 雙擊打開(kāi)H

vue-router是Vue.js中的一個(gè)路由插件，集成了不同的內(nèi)容，主要用來(lái)實(shí)現(xiàn)構(gòu)建單頁(yè)應(yīng)用。路由主要用來(lái)設(shè)置單頁(yè)訪問(wèn)路徑，并將路徑和頁(yè)面關(guān)聯(lián)起來(lái)。

示例操作步驟

第一步：準(zhǔn)備工作

雙擊打開(kāi)HBuilder編輯工具，新建靜態(tài)頁(yè)面并引入vue相關(guān)的js文件。

示例代碼：

lt;!DOCTYPE htmlgt;
lt;htmlgt;
lt;headgt;
    lt;meta charset"UTF-8"gt;
    lt;titlegt;Vue Router Examplelt;/titlegt;
    lt;script src""gt;lt;/scriptgt;
    lt;script src""gt;lt;/scriptgt;
lt;/headgt;
lt;bodygt;
lt;/bodygt;
lt;/htmlgt;

第二步：設(shè)置路由鏈接

在body標(biāo)簽元素內(nèi)插入div，并在div元素內(nèi)插入三個(gè)router-link，分別設(shè)置不同的to屬性。

示例代碼：

lt;div id"app"gt;
    lt;router-link to"/home"gt;Homelt;/router-linkgt;
    lt;router-link to"/about"gt;Aboutlt;/router-linkgt;
    lt;router-link to"/contact"gt;Contactlt;/router-linkgt;
lt;/divgt;

第三步：定義路由

在div元素下方添加script標(biāo)簽，定義三個(gè)對(duì)象變量，用來(lái)定義各個(gè)頁(yè)面的組件。

示例代碼：

lt;div id"app"gt;
    lt;router-link to"/home"gt;Homelt;/router-linkgt;
    lt;router-link to"/about"gt;Aboutlt;/router-linkgt;
    lt;router-link to"/contact"gt;Contactlt;/router-linkgt;
lt;/divgt;
lt;scriptgt;
    var Home  { template: 'lt;divgt;This is the Home ;/divgt;' };
    var About  { template: 'lt;divgt;This is the About ;/divgt;' };
    var Contact  { template: 'lt;divgt;This is the Contact ;/divgt;' };
lt;/scriptgt;

第四步：配置路由表

再次定義一個(gè)routes數(shù)組，數(shù)組中包含多個(gè)對(duì)象，每個(gè)對(duì)象有path和component屬性，分別對(duì)應(yīng)路徑和組件。

示例代碼：

lt;div id"app"gt;
    lt;router-link to"/home"gt;Homelt;/router-linkgt;
    lt;router-link to"/about"gt;Aboutlt;/router-linkgt;
    lt;router-link to"/contact"gt;Contactlt;/router-linkgt;
lt;/divgt;
lt;scriptgt;
    var Home  { template: 'lt;divgt;This is the Home ;/divgt;' };
    var About  { template: 'lt;divgt;This is the About ;/divgt;' };
    var Contact  { template: 'lt;divgt;This is the Contact ;/divgt;' };
    var routes  [
        { path: '/home', component: Home },
        { path: '/about', component: About },
        { path: '/contact', component: Contact }
    ];
lt;/scriptgt;

第五步：創(chuàng)建VueRouter對(duì)象

調(diào)用VueRouter構(gòu)造函數(shù)，并聲明一個(gè)變量router，對(duì)象內(nèi)部有routes，用來(lái)傳入路由表。

示例代碼：

lt;div id"app"gt;
    lt;router-link to"/home"gt;Homelt;/router-linkgt;
    lt;router-link to"/about"gt;Aboutlt;/router-linkgt;
    lt;router-link to"/contact"gt;Contactlt;/router-linkgt;
lt;/divgt;
lt;scriptgt;
    var Home  { template: 'lt;divgt;This is the Home ;/divgt;' };
    var About  { template: 'lt;divgt;This is the About ;/divgt;' };
    var Contact  { template: 'lt;divgt;This is the Contact ;/divgt;' };
    var routes  [
        { path: '/home', component: Home },
        { path: '/about', component: About },
        { path: '/contact', component: Contact }
    ];
    var router  new VueRouter({
        routes: routes
    });
lt;/scriptgt;

第六步：初始化Vue實(shí)例

調(diào)用Vue構(gòu)造函數(shù)，并傳入一個(gè)空對(duì)象{}，將其指向div元素的ID，然后保存代碼并預(yù)覽頁(yè)面效果。

示例代碼：

lt;div id"app"gt;
    lt;router-link to"/home"gt;Homelt;/router-linkgt;
    lt;router-link to"/about"gt;Aboutlt;/router-linkgt;
    lt;router-link to"/contact"gt;Contactlt;/router-linkgt;
lt;/divgt;
lt;scriptgt;
    var Home  { template: 'lt;divgt;This is the Home ;/divgt;' };
    var About  { template: 'lt;divgt;This is the About ;/divgt;' };
    var Contact  { template: 'lt;divgt;This is the Contact ;/divgt;' };
    var routes  [
        { path: '/home', component: Home },
        { path: '/about', component: About },
        { path: '/contact', component: Contact }
    ];
    var router  new VueRouter({
        routes: routes
    });
    new Vue({
        el: '#app',
        router: router
    });
lt;/scriptgt;

通過(guò)以上步驟，我們成功地使用vue-router創(chuàng)建了一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用。你可以根據(jù)需要添加更多的路由和頁(yè)面組件，實(shí)現(xiàn)更復(fù)雜的單頁(yè)應(yīng)用。