Home >Web Front-end >Vue.js >In-depth analysis of Vue router-link component to implement route navigation
With Vue.js, we have composed our application with components. When adding Vue Router, all we need to do is map our components to routes so that Vue Router knows where to render them. [Related recommendations: vue.js video tutorial]
Use router-link component navigates by passing to
to specify the link. b988a8fd72e5e0e42afffd18f951b277
will render a 3499910bf9dac5ae3c52d5ede7383485
tag with the correct href
attribute.
Official example:
<script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/vue-router@4"></script> <div id="app"> <h1>Hello App!</h1> <p> <router-link to="/">Go to Home</router-link> <router-link to="/about">Go to About</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div>
Instead of using the regular a
tag, a custom component router-link
is used to create the link. This allows Vue Router to change the URL without reloading the page, handling URL generation and encoding.
router-viewrouter-view
The component corresponding to the url will be displayed. You can place it anywhere to suit the layout.
In addition to using b988a8fd72e5e0e42afffd18f951b277
to create a tag to define navigation links, we can also use the instance method of router to write code. accomplish.
To navigate to a different URL, you can use the router.push
method. This method will add a new record to the history stack, so when the user clicks the browser's back button, they will be returned to the previous URL.
When b988a8fd72e5e0e42afffd18f951b277
is clicked, this method will be called internally, so click 327e3535b9e0e9f12607bd1fd4e603ad
Equivalent to calling router.push(...)
:
Declarative | Programmatic |
---|---|
327e3535b9e0e9f12607bd1fd4e603ad |
router.push(...) |
#The parameter of this method can be a string path, or an object describing the address.
// 字符串路径 router.push('/users/eduardo') // 带有路径的对象 router.push({ path: '/users/eduardo' }) // 命名的路由,并加上参数,让路由建立 url router.push({ name: 'user', params: { username: 'eduardo' } }) // 带查询参数,结果是 /register?plan=private router.push({ path: '/register', query: { plan: 'private' } }) // 带 hash,结果是 /about#team router.push({ path: '/about', hash: '#team' })
Note: If path is provided, params will be ignored
// `params` 不能与 `path` 一起使用 router.push({ path: '/user', params: { username } }) // -> /user
The function is the same as router.push
Similar, except that it does not add new records to the history during navigation
Declarative | Programmatic |
---|---|
123ae1b08ffed7a74481c5907bc02f7d |
router.replace(...) |
You can also add an attribute directly to the routeLocation
passed to router.push
replace: true
:
router.push({ path: '/home', replace: true }) // 相当于 router.replace({ path: '/home' })
This method takes an integer as a parameter, indicating how many steps forward or backward in the history stack, similar to window.history.go( n)
.
// 向前移动一条记录 router.go(1) // 相当于 router.forward() // 返回一条记录 router.go(-1) // 相当于 router.back() // 前进 3 条记录 router.go(3) // 如果没有那么多记录,静默失败 router.go(-100) router.go(100)
The above is the detailed content of In-depth analysis of Vue router-link component to implement route navigation. For more information, please follow other related articles on the PHP Chinese website!