When configuring vue_router, the redirect function is often used.
For example:
redirect to the login page without login (Navigation Guardian interception is also an efficient login check method)
index, home, house redirect to the home page, etc.
Acceptable values for redirect
String
The string is passed in as path, which is equivalent to {path: redirect}
{
...
redirect: "/assets/assetsIndex",
...
}
// 相当于
{
...
redirect: {
path: '/assets/assetsIndex' },
...
}
Object
First determine whether there is
a name
with the name, query, hash, and params provided by the name where the jump is initiated. It will be passed down.
If the redirect also provides these attributes, use the redirect provided to pass down.
redirect: {
name: 'assetsIndex',
params: {
id: 'redirect' },
}
// redirect 提供了 params, 目标组件可以收到该 params 数据
// redirect 没有提供, 目标组件收到发起跳转处的数据(发起跳转是有数据的话)
If there is no name, just find
the path and query after the path calculation, and the hash will be passed down.
If the redirect also provides these attributes, then use the redirect provided to pass down.
redirect: {
path: 'assetsIndex',
query: {
id: 'redirect' },
}
method
The method must return
. The content of a string return is finally passed down as the path,
so the provided params will be invalid
redirect: function (to) {
return 'assetsIndex'
}
In these cases that do not need to pass parameters, you can directly set the string of the target address.
{
path: "/assets",
component: layout,
redirect: "/assets/assetsIndex",
}
If you need to pass the value to the needs you encounter, you can refer to the following method
query jump with parameters
The query can take parameters directly, the disadvantage is that the parameters will be exposed in the address
// 发起跳转
this.$router.push({
name: 'assets', query: {
val: 'val值' } })
/* or */
this.$router.push({
path: '/assets', query: {
id: '编程式_id' } })
/* or */
this.$router.push("/assets?id=编程式_id")
// 重定向
{
path: "/assets",
name: "assets",
redirect: "/assetsHome",
}
// 目标路由
{
path: "/assetsHome",
component: assetsHome,
},
// 目标组件中取值
this.$route.query
params jump with parameters
Params takes parameters is relatively troublesome, because "if path is provided, params will be ignored" is also true in redirect.
So we can know that path cannot be used to set routing
. The advantage of params with parameters is of course that the parameters can be hidden in the address.
// 发起跳转
this.$router.push({
name: 'assets', params: {
id: '编程式_id' } })
// 重定向
{
path: "/assets",
name: "assets",
redirect: {
name: 'assetsHome' },
}
// 目标路由
{
path: "/assetsHome",
name: "assetsHome",
component: assetsHome,
}
// 目标组件中取值
this.$route.params
Dynamic path jump with parameters
I didn't want to write this method, because the author originally hated the dynamic path with parameters. I think that the method is too limited, and it is troublesome to add a parameter. I also need to order in
order not to be complained by the reader. I am lazy (the code was originally written for Be lazy), let's write a little bit
// 发起跳转
this.$router.push({
path: '/assets/编程式_id' })
// 重定向
{
path: "/assets/:id",
name: "assets",
redirect: {
name: 'assetsHome' },
}
// 目标路由
{
path: "/assetsHome/:id",
name: "assetsHome",
component: assetsHome,
}
// 目标组件中取值
this.$route.params
[Digression] The difference between redirection and alias
Redirection is to enter a, and then automatically jump to b.
Both a and b are real routing addresses. This process passes through two addresses, but a will not be recorded
The alias is to enter a, in fact it is to enter b
a is not the real routing address, this process is only at the b address from beginning to end
end