ondrop结束 获取dragstart传递参数_（八）vue-router子路由、参数

路由参数的传递和获取

注：js操作router使用this.$router，读取参数使用this.$route，当中相差一个r，需要注意

params路由参和query查询参两者区别是什么？

（1）params相当于post，浏览器地址栏看不到请求参数，但是在配置路由时一定要配置参数

路由配置 ：{path：'/XXX/ : 参数名1/ : 参数名1 ', name='XXX ', component='XXX'}

传递参数：<router-link ：to=

“{name:'XXX', params:{参数名1：XXX，参数名2：XXX}}”>

获取参数：this.$route.params.参数名

（2）query相当于get，浏览器地址栏可以看到请求参数

路由配置 ：{path：'/XXX ', name='XXX ', component='XXX'} 不用配置参数名

传递参数：<router-link ：to=“{name或者path:'XXX', query:{参数名1：XXX，参数名2：XXX}}”>

获取参数：this.$route.query.参数名

为了方便记忆，建议router跳转都使用name

使用上一个例子改写两个组件的路由配置及跳转

组件1 使用params传参

//路由配置，要配置参数  /:参数名
{path:'/temp1/:username', name:'temp1', component:Temp1}

//路由跳转，使用name
<router-link :to="{name:temp1, params:{username:'我是小刘鸭'}}">我是组件1,使用params传参</router-link>

//Temp1 修改并取参数this.$route.params
var Temp1 = {           
    template:`
        <div>我是组件1页面{{ msg1 }}</div>                
    `,
     data(){
         msg1:''
     },
     created(){
          this.msg1 = this.$route.params.username
     }
}  

组件2使用query传参

//路由配置，不用配置参数
{path:'/temp2', name:'temp2', component:Temp2}

//路由跳转，可以使用name和path
<router-link :to="{name:'temp2',query:{name:'我是小狗精'}}">我是组件2,query传参</router-link>

//Temp2 修改并取参数this.$route.query
var Temp2 = {           
    template:`
        <div>我是组件2页面{{ msg2 }}</div>        
    ,
    data(){
        msg2:''
    },
    created(){
        this.msg2 = this.$route.query.name
    }
}   

运行结果

点击跳转组件1页面，注意看地址栏

点击跳转组件2页面，注意看地址栏

注：路由路径一致时，参数不同不会发生跳转，使用 ：key=“$route.fullPath”,就可以识别整个路径不同进行跳转

路由嵌套

子路由配置中使用children[{ },{ }]配置子路由，并在上级页面中router-view留坑位

首先写两个组件，并配置路由，子路由中path不需要 / ,不然路由跳转时找不到

 var Temp1 = {           
     template:`
         <div>我是组件1页面 </div>       
     `
 }  
 var Temp2 = {           
     template:`
         <div>我是组件2页面</div>       
      `
 }   
 var router = new VueRouter({
     routes:[
         {
              path:'/temp1', 
              name:'temp1', 
              component:Temp1,
              //配置子路由，数组
              children:[
                  //配置temp2
                  {path:'temp2', name:'temp1.temp2', component:Temp2}
              ]
           },
       ]
 })

然后再vue中修改

new Vue({
    el:'#app',
    router,
    template:`
        <div>
            <div>我是主页</div>
            <h3><router-link :to="{name:'temp1'}">我是组件1</router-link></h3>                                                          
            <h3><router-link :to="{name:'temp1.temp2'}">我是组件2</router-link></h3>
            <router-view></router-view>
         </div>
            `
        })

运行显示：

点击组件1，注意地址栏 /temp1

点击组件2，应该跳转子路由 /temp1/temp2，发觉组件2页面并未跳转成功，为什么？？？

这时候我又想了想了一下，配置子路由，必须在页面留坑位，我为temp1配置了子路由，是不是我应该在Temp1页面中也留下坑位，虽然我在主页中留了坑位，但是对子路由页面显示不起作用，所以我在Temp1加了router-view留坑位，进行尝试

var Temp1 = {           
    template:`
        <div>
            我是组件1页面
            //给子路由留坑位
           <router-view></router-view> 
        </div>       
            `
}  

运行显示： /temp1/temp2显示成功，所以要记住子路由是嵌套必须在上级留下坑位，不然无法显示

vue的简单入门之旅结束啦，我也是一边学习一边测试，一边记录自己的想法，希望对大家学习有用。

接下来我准备学习vue-cli3脚手架，开发前端应用，小伙伴们可以关注我一起学习。