vue-router的路由模式hash和history,各有缺点。
但是history的路由却是http://a.com/c/d,这种方式,而不是http://a.com?c=d
该如何实现或者有什么插件可以做到这个吗?
网友回答:
cchenggit 2018-8-25 9:28 回复:
函数式编程可以
// 对应的url为 a.com?c=123
router.push({ path: 'a.com', query: { c: '123' }})
jsoncode 2018-8-25 9:52 回复:cchenggit
多谢,一直没有用到path这个参数,不过,吧path省略,更有意思,其实我想要的就是path省略后的结果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
</head>
<body>
<div id="app"></div>
<script src="vue.min.js"></script>
<script src="vue-router.js"></script>
<script>
var router = new VueRouter({
mode: 'history',
});
var app = new Vue({
el: '#app',
router: router,
mounted: function() {
var vm = this;
var index = 1;
setInterval(function() {
index++;
vm.$router.push({ query: { index: index,routeName:'home' } });
console.log(vm.$route.query.routeName,vm.$route.query.index);
}, 1000);
}
});
</script>
</body>
</html>
-
cchenggit 2018-8-25 9:58 回复:cchenggit
能帮忙解决问题就好,可以的话记得点帮助和解决哟(^U^)ノ~YO
-
jsoncode 2018-8-25 9:59 回复:cchenggit
router的name,怎么办呢?该怎么匹配呢? -
jsoncode 2018-8-25 10:01 回复:cchenggit
怎么根据参数来动态显示组件呢?
var Home = {
template: '<div>Home {{ $route.params.index }}</div>'
}
var User = {
template: '<div>User {{ $route.params.index }}</div>'
}
var router = new VueRouter({
mode: 'history',
routes: [
{ path: '/:index', component: Home },
{ path: '/:index', component: User },
]
})
var app = new Vue({
el: '#app',
router: router,
mounted: function() {
var vm = this;
var index = 1;
setInterval(function() {
index++;
vm.$router.push({path:'', query: { index: index } });
console.log(vm.$route.query.index);
}, 1000);
}
});