路由基本使用，加动画切换
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" /> 7 <title>管理后台</title> 8 <script src="../lib/jquery2.1.4.min.js"></script> 9 <script src="../lib/Vue2.5.17.js"></script> 10 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 11 <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> 12 <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 13 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 14 </head> 15 <style> 16 /* 使用了router-link的组件会有一个router-link-active类 */ 17 .router-link-active { 18 color: red; 19 font-weight: bold; 20 font-size: 18px; 21 } 22 23 /* 动画类 */ 24 .tog-enter,.tog-leave-to{ 25 opacity: 0; 26 transform: translateX(150px); 27 } 28 .tog-enter-active,.tog-leave-active{ 29 transition: all 0.6s ease; 30 } 31 </style> 32 <body> 33 <div id="app"> 34 <!-- <a href="#/login">登录</a> 35 <a href="#/register">登录</a> --> 36 <!-- 不推荐使用#号这种方式 --> 37 38 <!-- Vue-router提供了一个<router-link to="/lgin"></router-link> --> 39 <router-link to="/login">登录</router-link> 40 <!-- 默认渲染为一个a标签，通过tag可以修改 --> 41 <router-link to="/register" tag="span">注册</router-link> 42 <!-- 这是由vue-router提供的元素，用来当作占位符的，路由规则匹配到的组件就会展示到这个router-view中 --> 43 <!-- 使用router-view 提供一个展示的容器 --> 44 <transition name="tog" mode="out-in"> 45 <router-view></router-view> 46 </transition> 47 </div> 48 <template id="tmp"> 49 <div> 50 <h1>我是模板一的内容，登录</h1> 51 </div> 52 </template> 53 <template id="tmp1"> 54 <div> 55 <h1>我是模板二的内容，注册</h1> 56 </div> 57 </template> 58 <script> 59 60 var login = { 61 template : '#tmp' 62 } 63 var register = { 64 template : '#tmp1' 65 } 66 67 var routerObj = new VueRouter({ 68 // route //这个配置对象中的router表示路由匹配规则的意思 69 routes : [ //路由匹配规则 70 // 每个路由规则都是一个对象，这个规则对象身上有两个必须的属性 71 // 属性1是path , 表示监听哪个路由链接地址 72 // 属性2是component ， 表示如果路由前面匹配到的path,则展示component属性对应的组件 73 // component的属性值，必须是一个模板对象，不能是一个组件名称。 74 { path : '/' , redirect : '/login'}, //这是的redirect和node中的redirect不一样。 75 { path : '/login' , component : login}, 76 { path : '/register' , component : register}, 77 ], 78 // 自定义激活的类名称 79 linkActiveClass : 'myactive' 80 }) 81 82 var vm = new Vue({ 83 el : '#app', 84 data : {}, 85 methods: { 86 87 }, 88 // 将路由规则对象注册到vm实例上用来监听url地址变化 ，然后展示对应组件。 89 router : routerObj 90 }) 91 </script> 92 </body> 93 </html>
路由规则中传参数
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 7 <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" /> 8 <title>管理后台</title> 9 <script src="../lib/jquery2.1.4.min.js"></script> 10 <script src="../lib/Vue2.5.17.js"></script> 11 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 12 <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> 13 <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 14 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 15 crossorigin="anonymous"> 16 </head> 17 <style> 18 a:focus,a:hover{ 19 color: red; 20 } 21 .myactive { 22 color: red; 23 font-size: 26px; 24 font-weight: bold; 25 } 26 .toa-enter,.toa-leave-to{ 27 opacity: 0; 28 transform: translateX(100px); 29 } 30 .toa-enter-active,.toa-leave-active{ 31 transition: all 0.6s ease; 32 } 33 </style> 34 35 <body> 36 <div id="app"> 37 <!-- 在路由中，传id=10的参数 --> 38 <router-link to="/login?id=10&name=test">登录一下</router-link> 39 <router-link to="/register?id=10">注册一下</router-link> 40 41 <transition name="toa" mode="out-in"> 42 <router-view>注册一下</router-view> 43 </transition> 44 </div> 45 46 <template id="tmp1"> 47 <div> 48 登录一下{{ $route.query.id }} + {{ $route.query.name }} 49 </div> 50 </template> 51 <template id="tmp2"> 52 <div> 53 注册两下 54 </div> 55 </template> 56 <script> 57 var login = { 58 template: '#tmp1', 59 data(){ 60 return { 61 msg : '123' 62 } 63 }, 64 created(){ //组件的生命周期钩子函数 65 //this指当前组件，当前组件下有个$route 66 console.log(this.$route.query.id); 67 } 68 }; 69 70 var register = { 71 template: '#tmp2' 72 }; 73 74 //创建路由对象 75 var routerObj = new VueRouter({ 76 routes: [ 77 { 78 path : '/', 79 redirect : '/login' 80 }, 81 { 82 path: '/login', 83 component: login 84 }, 85 { 86 path: '/register', 87 component: register 88 }, 89 ], 90 linkActiveClass : 'myactive' 91 }) 92 var vm = new Vue({ 93 el: '#app', 94 data: {}, 95 methods: { 96 97 }, 98 router: routerObj 99 100 }) 101 </script> 102 </body> 103 104 </html>
使用params传参数
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 7 <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" /> 8 <title>管理后台</title> 9 <script src="../lib/jquery2.1.4.min.js"></script> 10 <script src="../lib/Vue2.5.17.js"></script> 11 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 12 <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script> 13 <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> 14 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 15 crossorigin="anonymous"> 16 </head> 17 <style> 18 a:focus,a:hover{ 19 color: red; 20 } 21 .myactive { 22 color: red; 23 font-size: 26px; 24 font-weight: bold; 25 } 26 .toa-enter,.toa-leave-to{ 27 opacity: 0; 28 transform: translateX(100px); 29 } 30 .toa-enter-active,.toa-leave-active{ 31 transition: all 0.6s ease; 32 } 33 </style> 34 35 <body> 36 <div id="app"> 37 <!-- 在路由中，传id=10的参数 --> 38 <router-link to="/login/12/alln">登录一下</router-link> 39 <router-link to="/register">注册一下</router-link> 40 41 <transition name="toa" mode="out-in"> 42 <router-view>注册一下</router-view> 43 </transition> 44 </div> 45 46 <template id="tmp1"> 47 <div> 48 登录一下 49 </div> 50 </template> 51 <template id="tmp2"> 52 <div> 53 注册两下 54 </div> 55 </template> 56 <script> 57 var login = { 58 template: '#tmp1', 59 data(){ 60 return { 61 msg : '123' 62 } 63 }, 64 created(){ //组件的生命周期钩子函数 65 //this指当前组件，当前组件下有个$route 66 console.log(this.$route.params.id); 67 console.log(this.$route.params.name); 68 } 69 }; 70 71 var register = { 72 template: '#tmp2' 73 }; 74 75 //创建路由对象 76 var routerObj = new VueRouter({ 77 routes: [ 78 { 79 path : '/', 80 redirect : '/login' 81 }, 82 { 83 path: '/login/:id/:name', 84 component: login 85 }, 86 { 87 path: '/register', 88 component: register 89 }, 90 ], 91 linkActiveClass : 'myactive' 92 }) 93 var vm = new Vue({ 94 el: '#app', 95 data: {}, 96 methods: { 97 98 }, 99 router: routerObj 100 101 }) 102 </script> 103 </body> 104 105 </html>