Vue 重定向传入多个参数后不能正确跳转页面
本帖最后由 ing 于 2020-7-5 20:00 编辑我向路径 /dynamic-redirect 传入多个参数
预计会跳到 /foo 的页面，可实际没有，而是进入了 if (params.id) 的结果
可如果我分别尝试这2个参数却可以达到预计效果，这是为什么，为什么我不能传入多个参数？？
单独传入hash
成功跳转到 baz
单独传入 query
成功跳转到 /foo
本帖最后由 cube 于 2020-7-5 14:56 编辑
如"linguo2625469"所说,你地址构造的有问题.
应该以这样的格式.
http://host/#/dynamic-redirect/to?hash=null&to=foo
但问题是,你要用hash与query并存.所以要控制顺序.
http://host/#/dynamic-redirect/to?to=foo&hash=null
并且需要重新理解一下,url是由什么构成的.
<scheme>://<host>:<port>/<path>?<query> 本帖最后由 ing 于 2020-7-5 20:00 编辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
</div>
<script>
const Home = { template: '<router-view></router-view>' };
const Foo = { template: '<div>foo</div>' };
const Baz = { template: '<div>baz</div>' };
const WithParams = { template: '<div>{{ $route.params.id }}</div>' };
const router = new VueRouter({
routes: [
{
path: '/', component: Home,
children:[
{ path: 'foo', component: Foo },
{ path: 'baz', name: 'baz', component: Baz },
{ path: 'with-params/:id', component: WithParams }
]
},
// dynamic redirect, note that the target route `to` is available for the redirect function
{ path: '/dynamic-redirect/:id?',
redirect: to => {
const { hash, query, params } = to;
if (hash === '#baz') {
return { name: 'baz', hash: '' }
}
if (query.to === 'foo') {
return { path: '/foo', query: null }
}
if (params.id) {
return '/with-params/:id'
} else {
return '/bar'
}
}
}
]
});
new Vue({
router,
template: '<router-view></router-view>'
}).$mount('#app')
</script>
</body>
</html> 学习学习！！ 你这什么跟什么啊 。。。
const { hash, query, params } = to; 这个是ES6的解构吧
hash, query, params 应该是三个不同的路由属性吧
hash /dynamic-redirect/#baz
params /dynamic-redirect/xxx
query /dynamic-redirect/xxx?to=foo
应该是这样吧 首先 参数不要带#号 会被路由识别为路由url
其次 ?后数据只能键值对形式 你?键1=值1&键2?键3=值2这样参数无法解析的 你的query.to 是获取不到的 想获取到需要换写法
页:
[1]