前置知识请戳这里
vue-routerCDN地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js
vue-router下载地址：https://github.com/vuejs/vue-router/tree/dev/dist
vue2.0路由基本写法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/login">登录</router-link> <router-link to="/register">注册</router-link> <!--组件的显示占位域--> <router-view></router-view> </div> <script> //1.0 准备组件 var App = Vue.extend({}); var login = Vue.extend({ template: '<div><h3>登录</h3></div>' }); var register = Vue.extend({ template: '<div><h3>注册</h3></div>' }) //2.0 实例化路由规则对象 var router = new VueRouter({ routes: [{ path: '/login', component: login }, { path: '/register', component: register }, { path:'/', //当路径为/时，重定向到/login redirect:'/login' } ] }); //3.0 开启路由对象 new Vue({ el: '#app', router: router }) </script> </body> </html>
vue2.0路由传参
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/login">登录</router-link> <router-link to="/register/value">注册</router-link> <!--组件的显示占位域--> <router-view></router-view> </div> <script> //1.0 准备组件 var App = Vue.extend({}); var login = Vue.extend({ template: '<div><h3>登录</h3></div>' }); var register = Vue.extend({ template: '<div><h3>注册{{name}}</h3></div>', data:function(){ return { name:'' } }, created:function(){ this.name = this.$route.params.name; } }); //2.0 实例化路由规则对象 var router = new VueRouter({ routes: [{ path: '/login', component: login }, { path: '/register/:name', component: register }, { path:'/', //当路径为/时，重定向到/login redirect:'/login' } ] }); //3.0 开启路由对象 new Vue({ el: '#app', router: router }) </script> </body> </html>
vue2.0路由嵌套
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to="/account/login">登录</router-link> <router-link to="/account/register">注册</router-link> <!--组件的显示占位域--> <router-view></router-view> </div> <script> //1.0 准备组件 var App = Vue.extend({}); var account = Vue.extend({ template: '<div><h1>账号组件</h1><router-view></router-view></div>' }); var login = Vue.extend({ template: '<div><h3>登录</h3></div>' }); var register = Vue.extend({ template: '<div><h3>注册</h3></div>' }); //2.0 实例化路由规则对象 var router = new VueRouter({ routes: [{ path: '/account', component: account, children: [{ path: 'login', component: login }, { path: 'register', component: register } ] }] }); //3.0 开启路由对象 new Vue({ el: '#app', router: router }) </script> </body> </html>