vue路由
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <script src="vue.js"></script> 9 <script src="vue-router.js"></script> 10 <!-- <script src="https://unpkg.com/vue-router@3.0.6/dist/vue-router.js"></script> --> 11 <style> 12 /* 设置选中路由高亮的方式 1*/ 13 .router-link-active{ 14 color: red; 15 font-weight: 800; 16 font-style: initial; 17 font-size: 80px; 18 text-decoration: underline 19 } 20 .myactive{ 21 color: blue; 22 font-weight: 800; 23 font-style: initial; 24 font-size: 80px; 25 text-decoration: underline 26 } 27 /* 动画 */ 28 .v-enter, 29 .v-leave-to{ 30 opacity: 0; 31 transform: translateX(140px); 32 } 33 .v-enter, 34 .v-leave-active{ 35 transition: all 0.5s ease; 36 } 37 </style> 38 </head> 39 <body> 40 <div id="app"> 41 <!-- 这是vue-router提供的元素，专门用来当作占位符的，将来，路由规则，匹配到的组件，就会展示到这个router-view中去 --> 42 <!-- 所以我们可以把它当作占位符 --> 43 <!-- <a href="#/login">登录</a> 44 <a href="#/register">注册</a> --> 45 <!-- router-link默认渲染一个a标签 --> 46 <router-link to="/login" tag="span">登录</router-link> 47 <router-link to="/register" >注册</router-link> 48 <!-- Vue动画使用transition 标签把router-view包裹起来 --> 49 <transition mode="out-in"> 50 <router-view> </router-view> 51 </transition> 52 </div> 53 54 <script> 55 var login={ 56 template:'<h1>登录组件</h1>' 57 } 58 var register={ 59 template:'<h1>注册组件</h1>' 60 } 61 // <!-- 创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有一个路由的构造函数，叫做vuerouter --> 62 var routerObj=new VueRouter({ 63 // route//这个配置中的route表示【路由匹配规则】 64 routes:[ 65 // 每个路由规则都是一个对象，这个规则对象，身上，有两个必须的属性 66 // 属性1是path，表示监听哪个路由链接地址 67 // 属性2是component,表示,如果路由是前面匹配到的path，则表示component属性对应哪个组件 68 // 注意：component的属性值，必须是一个组件的模板对象 ，不能是组件的引用名称 69 // 指定根路径,重定向 70 {path:'/',redirect: '/login'}, 71 { path: '/login', component: login }, 72 { path: '/register', component: register } 73 ], 74 /* 设置选中路由高亮的方式 29*/ 75 linkActiveClass:'myactive' 76 }) 77 var vm=new Vue({ 78 el:'#app', 79 data:{ 80 81 }, 82 methods: { 83 84 }, 85 router:routerObj//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件 86 87 }) 88 </script> 89 </body> 90 </html>
路由传参的方式
方式一路由传参-使用query方式传递参数
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <script src="vue.js"></script> 10 <script src="vue-router.js"></script> 11 <body> 12 <!-- 注：路由传参-使用query方式传递参数 --> 13 <div id="app"> 14 <!-- 如果在路由中，使用 --> 15 <router-link to="/login?id=10&name=zs" tag="span">登录</router-link> 16 <router-link to="/register" >注册</router-link> 17 <router-view> </router-view> 18 </div> 19 <script> 20 var login={ 21 template:'<h1>登录---{{$route.query.id}}---{{$route.query.name}}</h1>', 22 created () { 23 // 组件的生命周期钩子函数 24 console.log(this.$route) 25 // 这里的this指向组件的实列 26 console.log(this.$route.query.id) 27 } 28 } 29 var register={ 30 template:'<h1>注册</h1>' 31 } 32 var router=new VueRouter({ 33 routes:[ 34 { path: '/login', component: login }, 35 { path: '/register', component: register } 36 ] 37 }) 38 var vm=new Vue({ 39 el:'#app', 40 data:{}, 41 methods: { 42 43 }, 44 router:router//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件 45 }) 46 </script> 47 </body> 48 </html>
路由传参的第二种方式：
<!-- 注：路由传参-使用params方式传递参数 -->
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <script src="vue.js"></script> 10 <script src="vue-router.js"></script> 11 <body> 12 <!-- 注：路由传参-使用params方式传递参数 --> 13 <div id="app"> 14 <!-- 如果在路由中，使用 --> 15 <router-link to="/login/10/is" >登录</router-link> 16 <router-link to="/register" >注册</router-link> 17 <router-view> </router-view> 18 </div> 19 <script> 20 var login={ 21 template:'<h1>登录----{{this.$route.params.id}}---{{$route.params.name}}</h1>', 22 created () { 23 console.log(this); 24 console.log(this.$route); 25 console.log(this.$route.params.id); 26 console.log(this.$route.params.name); 27 28 } 29 } 30 var register={ 31 template:'<h1>注册</h1>' 32 } 33 var router=new VueRouter({ 34 routes:[ 35 { path: '/login/:id/:name', component: login }, 36 { path: '/register', component: register } 37 ] 38 }) 39 var vm=new Vue({ 40 el:'#app', 41 data:{}, 42 methods: { 43 44 }, 45 router:router//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件 46 }) 47 </script> 48 </body> 49 </html>
路由的嵌套
使用children属性实现路由
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <script src="vue.js"></script> 10 <script src="vue-router.js"></script> 11 <body> 12 <!-- 注：路由传参-使用params方式传递参数 --> 13 <div id="app"> 14 <!-- 如果在路由中，使用 --> 15 <!-- <router-link to="/login/10/is" >登录</router-link> 16 <router-link to="/register" >注册</router-link> --> 17 <router-link to="/account">Accout</router-link> 18 <router-view> </router-view> 19 </div> 20 <template id="tmp1"> 21 <div> 22 <h1>这是account的组件</h1> 23 <router-link to="/account/login">登陆</router-link> 24 <router-link to="/account/register">注册</router-link> 25 <router-view ></router-view> 26 </div> 27 </template> 28 <script> 29 var account={ 30 template:'#tmp1', 31 32 } 33 var login={ 34 template:'<h1>登录</h1>', 35 } 36 var register={ 37 template:'<h1>注册</h1>' 38 } 39 var router=new VueRouter({ 40 routes:[ 41 { 42 path: '/account', 43 component: account, 44 // 使用children属性实现子路由时。子路由的path前面不能带/ ,否则永远以根路径开始请求， 45 // 这样不方便用户去理解url的地址 46 47 children:[ 48 // { path: '/login', component: login }, 49 { path: 'login', component: login }, 50 { path: 'register', component: register } 51 ] 52 53 }, 54 55 ] 56 }) 57 var vm=new Vue({ 58 el:'#app', 59 data:{}, 60 methods: { 61 62 }, 63 router:router//将路由规则对象，注册到vm实例，用来监听URL地址的变化，然后展示对应的组件 64 }) 65 </script> 66 </body> 67 </html>