vue-router使用

query使用

 

　　<router-link v-if="detailAuthority.KOCb19 === 'KOCb19'" class="headBtn" :to="{name:'pointsshopmall',query:{auth:this.detailAuthority.KOCb19}}">积分商城后台&nbsp;></router-link>

 

　　this.$router.push({path:'/pointsshopmall',query:{auth:this.$route.query.auth}});

 

　　this.$route.query.auth

 

　　使用query带参数到新的页面刷新，url还是会有参数的

 

params使用

　　

　　<router-link v-if="detailAuthority.KOCb19 === 'KOCb19'" class="headBtn" :to="{name:'pointsshopmall',params:{auth:this.detailAuthority.KOCb19}}">积分商城后台&nbsp;></router-link>

 

　　this.$router.push({path:'/pointsshopmall',params:{auth:this.$route.query.auth}});

 

　　this.$route.params.auth

 

　　使用params带参数到新的页面刷新，url没有参数

vue-router

• 概念
  • 路由:前端路由、后端路由（url+请求方式的判断和分发)
    • 前端路由:锚点值，根据锚点值来做不同处理的分发，页面的显示 use
  • 1：下载、
  • 2:安装插件、
    • Vue.use(VueRouter);
  • 3:构建路由对象
    • let router = new VueRouter();
  • 4、配置路由规则
    • router.addRouters([{name:'',path:'/',component:组件对象},{}])
      • name不是必须的，path是必须的。严格匹配路径
      • 在router-view中，匹配上就显示对应的组件
  • 5:传递options对象new Vue的时候
    • new Vue({ router:router});
  • 6:配置 作为显示
• router-link的使用
  • <router-link to="/login">点我</router-view>

vue-router参数传递和接收

• 1：给定router-link设置
  • <router-link :to="'/music/show/' +item.id ">{{item.name}}</router-link>
• 2: 设置通配符路由规则
  • { path: '/music/show/:id', component: MusicDetail }
• 3：通过route对象获取路由参数
  • this.$route.params
    • 注意:路由规则中通配符配置是什么名称，后续params对象就用什么名称做key取值
• router对象
• route对象
• 总结:通过url中的参数可以有两种方式获取：
  • params、query
    • params:
      • link-> :to="'/xxx/' + item.id"
      • 路由规则配置 /xxx/:id
      • 代码中获取 this.$route.params.id
    • query: (查询字符串)
      • link -> :to="'/xxx?id=' + item.id"
      • 路由规则 /xxx
      • 代码中获取 this.$route.query.id;