这篇“怎么使用Vue-router实现单页面路由”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用vue-router实
这篇“怎么使用Vue-router实现单页面路由”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么使用vue-router实现单页面路由”文章吧。
vue中，有一个类库叫做vue-router，是用来做单页面路由的。做路由一般分为四个步骤：
准备一个根组件 vue.extend()；
需要做路由的内容准备 template；
准备路由 new VueRouter（）；
关联路由 map
启动路由 start(App,'#box')；//第一个参数是准备的根组件，第二个参数是要捆绑的位置就是自己定义的id中
关于路由跳转的简单代码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="js/vue.js" ></script> <script type="text/javascript" src="js/vue-router.js" ></script> <script type="text/javascript" src="js/vue-resource.js" ></script> <title></title> </head> <body> <div id="box"> <ul> <li> <a v-link="{path:'/home'}">我是第一个a</a> </li> <li > <a v-link="{path:'news'}">我是第二个a</a> </li> </ul> <div> <router-view></router-view> </div> </div> </body> <script> //1.准备一个根组件 var App=Vue.extend(); //2.Home News 组件准备 var Home=Vue.extend({ template:'<h4>我是第一个a的内容页</h4>' }); var News=Vue.extend({ template:'<h4>我是第二个a的内容页</h4>' }) //3.准备路由 var router = new VueRouter(); //4.关联 router.map({ 'home':{ component:Home }, 'news':{ component:News } }) //5.启动路由 router.start(App,'#box'); </script></html>Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。
以上就是关于“怎么使用vue-router实现单页面路由”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网精选频道。
--结束END--
本文标题: 怎么使用vue-router实现单页面路由
本文链接: https://www.lsjlt.com/news/344767.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0