vue-router 的用法
vue-router的两种实现导航的方式：
1.通过<router-link :to="...">实现：to指向一个对象{}里面有path,name ,query等属性，可以设置路由导航的路径，传递的参数，组件名称
1 <div id="app"> 2 <!-- 传递参数 的两种方式query//params--> 3 <router-link :to="{path:'login',query:{id:100}}">登录</router-link> 4 <router-link :to="{name:'register',params:{name:'韩信'}}">注册</router-link> 5 <!-- 组件占位 --> 6 <router-view></router-view> 7 </div> 8 11 <script> 12 // 创建两个组价，分别是login,register 13 var login ={ 14 template:"<h3>我是登录组件---参数{{this.$route.query.id}}</h3>", 15 data(){ 16 return{} 17 }, 18 mounted(){ 19 console.log(this.$route.query.id); // 输出 100 20 } 21 } 22 var register ={ 23 template:"<h3>我是注册组件---参数{{this.$route.params.name}}</h3>", 24 data(){ 25 return{} 26 }, 27 mounted(){ 28 console.log(this.$route.params.name); //输出 韩信 29 } 30 } 31 32 // 创建路由对象： 33 const router = new VueRouter({ 34 routes:[ 35 {path:'/login',component:login}, 36 {path:'/register', name:'register',component:register}, 37 38 ] 39 }) 40 var vm = new Vue({ 41 el: "#app", 42 data: {}, 43 router 44 45 })
备注：使用<router-link to=" ">时使用的规范
1 // 字符串 2 <router-link to="apple"> to apple</router-link> 3 // 对象 4 <router-link :to="{path:'apple'}"> to apple</router-link> 5 // 命名路由 6 <router-link :to="{name: 'applename'}"> to apple</router-link> 7 //直接路由带查询参数query，地址栏变成 /apple?color=red 8 <router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link> 9 // 命名路由带查询参数query，地址栏变成/apple?color=red 10 <router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link> 11 //直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略 12 <router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link> 13 // 命名路由带路由参数params，地址栏是/apple/red 14 <router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
2.通过$router.push（{}）实现路由跳转
1 <div id="app"> 2 <!-- 传递参数 的两种方式query//params--> 3 <!-- <login></login> 4 <register></register> --> 5 <!-- 组件占位 --> 6 <router-view></router-view> 7 </div> 8 9 <template id="login"> 10 <div> 11 <h3>我是登录组件---参数{{this.$route.query.name}}</h3> 12 <button @click="back()">跳转到login组件</button> 13 </div> 14 </template> 15 16 <template id="register"> 17 <div> 18 <h3>我是注册组件---参数{{this.$route.query.name}}</h3> 19 <button @click="next()">跳转到login组件</button> 20 </div> 21 </template> 22 23 <script> 24 // 创建两个组价，分别是login,register 25 var login ={ 26 template:"#login", 27 data(){ 28 return{} 29 }, 30 mounted(){ 31 console.log(this.$route.query.name); // 输出 100 32 }, 33 methods:{ 34 back(){ 35 this.$router.push({name:'register',query:{name:"杨芳芳"}}) 36 } 37 } 38 } 39 var register ={ 40 template:"#register", 41 data(){ 42 return{} 43 }, 44 mounted(){ 45 console.log(this.$route.query.name); //输出 韩信 46 }, 47 methods:{ 48 next(){ 49 this.$router.push({name:'login',query:{name:"陈斌"}}) 50 } 51 } 52 } 53 54 // 创建路由对象： 55 const router = new VueRouter({ 56 routes:[ 57 {path:'/login',component:login,name:'login'}, 58 {path:'/register', name:'register',component:register}, 59 60 ] 61 }) 62 var vm = new Vue({ 63 el: "#app", 64 data: {}, 65 router, 66 components:{ 67 login,register 68 } 69 70 }) 71 </script>
上述代码解析：先创建了两个组件login// register，并创建路由对象，配置路由规则。在组件内部通过事件触发--->this.$router.push({name:'组件名称'，query:{参数}})
备注：$router.push({name:'组件名称'，query:{参数}})的使用规则：
1 // 字符串 2 router.push('apple') 3 // 对象 4 router.push({path:'apple'}) 5 // 命名路由 6 router.push({name: 'applename'}) 7 //直接路由带查询参数query，地址栏变成 /apple?color=red 8 router.push({path: 'apple', query: {color: 'red' }}) 9 // 命名路由带查询参数query，地址栏变成/apple?color=red 10 router.push({name: 'applename', query: {color: 'red' }}) 11 //直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略 12 router.push({path:'applename', params:{ color: 'red' }}) 13 // 命名路由带路由参数params，地址栏是/apple/red 14 router.push({name:'applename', params:{ color: 'red' }})
