vue-resouce 交互
vue-router 路由
路由：根据不同url地址，出现不同效果
该课程配套用 0.7.13版本 vue-router
主页 home
新闻页 news
html:
<a v-link="{path:'/home'}">主页</a> 跳转链接 展示内容: <router-view></router-view>
js:
//1. 准备一个根组件 var App=Vue.extend(); //2. Home News组件都准备 var Home=Vue.extend({ template:'<h3>我是主页</h3>' }); var News=Vue.extend({ template:'<h3>我是新闻</h3>' }); //3. 准备路由 var router=new VueRouter(); //4. 关联 router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //5. 启动路由 router.start(App,'#box');
跳转:
router.redirect({ 'https://www.jb51.net/':'/home' });
下载vue-router:
vue-router路由:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <script src="https://www.jb51.net/bower_components/vue-router/dist/vue-router.js"></script> <style> </style> </head> <body> <div> <ul> <li> <a v-link="{path:'/home'}">主页</a> </li> <li> <a v-link="{path:'/news'}">新闻</a> </li> </ul> <div> <router-view></router-view> </div> </div> <script> //1. 准备一个根组件 var App=Vue.extend(); //2. Home News组件都准备 var Home=Vue.extend({ template:'<h3>我是主页</h3>' }); var News=Vue.extend({ template:'<h3>我是新闻</h3>' }); //3. 准备路由 var router=new VueRouter(); //4. 关联 router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //5. 启动路由 router.start(App,'#box'); </script> </body> </html>
跳转：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <script src="https://www.jb51.net/bower_components/vue-router/dist/vue-router.js"></script> <style> </style> </head> <body> <div> <ul> <li> <a v-link="{path:'/home'}">主页</a> </li> <li> <a v-link="{path:'/news'}">新闻</a> </li> </ul> <div> <router-view></router-view> </div> </div> <script> //1. 准备一个根组件 var App=Vue.extend(); //2. Home News组件都准备 var Home=Vue.extend({ template:'<h3>我是主页</h3>' }); var News=Vue.extend({ template:'<h3>我是新闻</h3>' }); //3. 准备路由 var router=new VueRouter(); //4. 关联 router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //5. 启动路由 router.start(App,'#box'); //6. 跳转 router.redirect({ 'https://www.jb51.net/':'home' //访问根目录时，跳转到/home }); </script> </body> </html>