vue-router使用
query使用
<router-link v-if="detailAuthority.KOCb19 === 'KOCb19'" class="headBtn" :to="{name:'pointsshopmall',query:{auth:this.detailAuthority.KOCb19}}">积分商城后台 ></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}}">积分商城后台 ></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:配置 作为显示
- 路由:前端路由、后端路由(url+请求方式的判断和分发)
- 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
- link->
- query: (查询字符串)
- link ->
:to="'/xxx?id=' + item.id"
- 路由规则
/xxx
- 代码中获取
this.$route.query.id;
- link ->
- params:
- params、query