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

Posted 一朵小花zyx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用Vue.js中的路由vue-router创建单页应用相关的知识,希望对你有一定的参考价值。

  1. 第一步,双击打开HBuilder编辑工具,新建静态页面并引入vue相关的js文件,如下图所示:

  2. 第二步,在<body></body>标签元素内插入div,并在div元素内插入三个router-link,分别设置不同的to属性,如下图所示:

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

  3. 第三步,在<div></div>下方添加<script></script>标签,定义三个对象变量,如下图所示:

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

  4. 第四步,再次定义一个routes数组,数组有path和component属性,如下图所示:

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

  5. 第五步,调用VueRouter对象,并声明一个变量router,对象内部有routes,如下图所示:

  6. 第六步,初始化调用Vue({});,直接指向div元素ID;保存代码并预览页面效果,如下图所示:



以上是关于如何使用Vue.js中的路由vue-router创建单页应用的主要内容,如果未能解决你的问题,请参考以下文章

vue.js路由vue-router——简单路由基础

vue,js vue-router 2 组件数据不更新

Vue.js 相关知识(路由)

Vue--路由「Vue-router」的使用

Vue之 vue-router

ATP应用测试平台——关于vue-router前端路由的配置使用案例