如何使用Vue.js中的路由vue-router创建单页应用

vue-router是Vue.js中的一个路由插件，集成了不同的内容，主要用来实现构建单页应用。路由主要用来设置单页访问路径，并将路径和页面关联起来。

示例操作步骤

第一步：准备工作

双击打开HBuilder编辑工具，新建静态页面并引入vue相关的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;

第二步：设置路由链接

在body标签元素内插入div，并在div元素内插入三个router-link，分别设置不同的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标签，定义三个对象变量，用来定义各个页面的组件。

示例代码：

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数组，数组中包含多个对象，每个对象有path和component属性，分别对应路径和组件。

示例代码：

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;

第五步：创建VueRouter对象

调用VueRouter构造函数，并声明一个变量router，对象内部有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实例

调用Vue构造函数，并传入一个空对象{}，将其指向div元素的ID，然后保存代码并预览页面效果。

示例代码：

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创建了一个简单的单页应用。你可以根据需要添加更多的路由和页面组件，实现更复杂的单页应用。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。