Vue router error jump to homepage ("/")
There are two main ways to jump pages through this.$ method.
// router/
const routes = [{
path: "/",
name: "login",
component: Login
}, {
path: "/index",
name: "index"
component: Index
}
]
①this.$({path: "/index", query: {id: "1", name: "one"}})
②this.$({name: "login", params: {id: "2", name: "two"}})Two methods: one specifies the path and the other specifies the component name.
path corresponds to path in router, name corresponds to name in router, one by one
path to query, name to params
If the path specified by path does not exist in router/, the address bar will jump but the content will not be loaded
The name specified by name does not exist in router/ will cause the default jump to "/"
Overview of Vue router routing method
1. Overview
When using Vue projects, the most common thing we use is the Vue Router library that is equipped with Vue.
So how many ways to jump routes are there in daily development?
2. Jump method
1. Use router-link tags
Using the router-link tag, we usually use 2 parameters, the most commonly used is to parameter
to parameter indicates the routing object you want to jump to
The router-link tag will call the () method. This method will return a route without trace when you click the browser's return button.
It can be a routing path
<router-link to="/home">Home</router-link> <router-link :to="'/home'">Home</router-link>
It can also be a routing object, or even carry parameters for it
<router-link :to="{ path: '/home' }">Home</router-link>
<router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link>
<router-link :to="{ path: '/register', query: { plan: 'private' }}">
Register
</router-link>2. Use router-replace
If the replace property is set, () will be called when clicked, instead of (), so no history will be left after navigation.
<router-link to="/abc" replace></router-link>
3. Use router-push
Methods 1 and 2 are called using html methods, corresponding to them, and there are also methods that use js code to control routing.
('/users/eduardo')
({ path: '/users/eduardo' })
({ name: 'user', params: { username: 'eduardo' } })
({ path: '/register', query: { plan: 'private' } })
({ path: '/about', hash: '#team' })3. The difference between params and query in routing
In the above code, it is found that there are two different ways to pass parameters to routes, params and query. What is the difference?
What is query?
Dictionary of decoded query parameters extracted from the search part of the URL. What is the content behind the address? It has been parsed.
What are params?
The decoded parameter dictionary extracted from path. It is the path parameters in the vue route
The **id ** field in the following code is the path parameter, which can be obtained when using params.
const routes = [
{ path: '/users/:id', component: User },
]Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.