前端框架vue.js系列（13）：路由

来源：互联网发布：php采集站编辑：程序博客网时间：2024/06/05 00:57

路由是指在单页面应用中可以实现切换屏内容的效果。vue的路由实现需要应用vue-router.js，可以到官网去下载，vue-router.js要与vue.js版本一致。

参考Demo：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vue路由</title><script src="../js/libs/vue/2.4.2/vue.min.js"></script><script src="../js/libs/vue/2.4.2/vue-router.js"></script></head><body><div id="box"><div><router-link to="/home">主页</router-link><router-link to="/news">新闻</router-link><router-link to='/about'>关于</router-link></div><div><router-view></router-view></div></div><script>//组件var Home = {data: function() {return {pop: "主页"}},template: '<h3>我是{{pop}}</h3>'};var News = {data: function() {return {pop: "新闻"}},template: '<h3>我是{{pop}}</h3>'}var About = {data: function() {return {pop: "关于"}},template: '<h3>我是{{pop}}</h3>'}//配置路由var routes = [{path: '/home',component: Home},{path: '/news',component: News},{path: '/about',component: About},//重定向{path: '*',redirect: '/home'}]//生成路由实例const router = new VueRouter({routes})//挂载到vue上new Vue({router,el: '#box'})</script></body></html>

（注）你也可以使用第三方整合的路由：如 Page.js 或者 Director。

Page.js ： https://github.com/visionmedia/page.js

Director ： https://github.com/flatiron/director

阅读全文

1 0