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

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

示例操作步驟

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

雙擊打開HBuilder編輯工具，新建靜態(tài)頁面并引入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)插入三個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)簽，定義三個對象變量，用來定義各個頁面的組件。

示例代碼：

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;

第四步：配置路由表

再次定義一個routes數(shù)組，數(shù)組中包含多個對象，每個對象有path和component屬性，分別對應(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對象

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

示例代碼：

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實例

調(diào)用Vue構(gòu)造函數(shù)，并傳入一個空對象{}，將其指向div元素的ID，然后保存代碼并預(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;

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