.Vue路由(路由配置、传参、获取参数)

this.$route 和 this.$router区别：

 this.$route 信息参数（query、prams）传参获取
 this.$router 功能函数，go()，push()等方法调用

1.导入和使用路由(main.js)：

  import Router from 'vue-router'
  // 使用路由
  Vue.use(Router)

  //导入vue页面
  import RouterA from '../page/router/routerA'
  import RouterB from '../page/router/routerB'

  export default new Router({
    routes: [
     {
        path: '/RouterA',
        component: 'RouterA'
      },
      {
        name: 'RouterB',
        //path: '/RouterB',
        path: '/RouterB/:name', //动态拼接路由path，如果不指定url只是路由页面，否则（/RouterB/name2）
        component: 'RouterB'
      }
    ]
  });

  参数说明：
      name: '名称，vue页面可通过name调用',
      path: '访问路径',
      component: '具体vue页面'

2.routerA.vue 页面案例：

<template>
  <div>
        跳转页面： <br/>
        方式一：(:to动态绑定name 或则 path) 页面自动解析成path地址 <br/>
        <router-link :to="{name:'RouterB'}">去B页面</router-link> <br/>
        方式二：(to="path")，只能指定path值  <br/>
        <router-link to="/RouterB">去B页面</router-link>  <br/>
        
        路由页面传入参数:<br/>
        方式一：(通过query传入参数，参数通过url get方式拼接) <br/>
        <router-link :to="{name:'RouterB', query: {name:'name1', title: 'title'} }">去B页面，传入参数</router-link>    <br/>

        方式二：(通过params传入参数，参数通过路径[/001]形式拼接到url上，如果没有在路径配置种使用参数占位符，url不会拼接，直接展示是具体路由页面) <br/>
        <router-link :to="{name:'RouterB', params: {name:'name2', title: 'title2'}}">去B页面，params传入参数</router-link> <br/>

  </div>
</template>

<script>
exprot default {
    
}
</script>
<style>
</style>

3.routerB.vue 页面案例

<template>
  <div>
        传入页面参数：{{params}}
  </div>
</template>
<script>
  export default {
      data(){
          return {
              params: ''
          }
      },
      //数据初始化完毕自动调用方法
      created(){
          //获取传入的参数
          var param = this.$route.query;
          // var param = this.$route.params;
          this.params = param
          //如果使用query方式传入的参数使用this.$route.query 接收
          //如果使用params方式传入的参数使用this.$router.params接收
      }
  }
</script>
<style>
</style>

 

作者：圆梦人生
链接：https://www.jianshu.com/p/f9a6c224128d
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

 

<template>
    <div>
        活动详情
        {{item.name}}
    </div>
</template>

<script>
import axios from 'axios'
// export default {
//     asyncData( {params} ){
//         //params.id
//         return axios.get(`https://www.easy-mock.com/mock/5c1da995eba47d7ec5d13766/gathering/gathering/${params.id}`).then(
//             res =>{              
//               return {item: res.data.data}
//             }
//         )
//     }
// }


export default{
    data(){
        return{
            item:{},
            paras:''
        }
        
        
    },
    created(){
       
        this.load();
        this.paras=this.$route.query
    },
    methods: {
        load(){
            axios.get('https://www.easy-mock.com/mock/5c1da995eba47d7ec5d13766/gathering/gathering/${paras}').then(res=>{
                this.item=res.data.data;
            })
        }
    },
}
</script>