current position:Home>Vue router routing navigation

Vue router routing navigation

2022-04-29 18:24:58Rookie_ Xiao Ka kumou

Vue Router

adopt Vue.js, We have composed our application with components . When joining Vue Router when , All we need to do is put our Mapping components to routes , Give Way Vue Router Know where to render them .

Vue Router Use

declarative

Use router-link Components for navigation , By passing to To specify the link .
<router-link> A with the correct href Attribute <a> label .
The official sample :

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></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>
  <!--  Route exit  -->
  <!--  The component to which the route matches is rendered here  -->
  <router-view></router-view>
</div>

There is no conventional a label , Instead, use a custom component router-link To create a link . This makes Vue Router Can be in Change without reloading the page URL, Handle URL Generation and coding of .

router-view
router-view Will display with url Corresponding components . You can put it anywhere , To fit the layout .

Programming navigation

Besides using <router-link> establish a Tags to define navigation links , We can also use router Instance method of , By writing code to achieve .

Want to navigate to different URL, have access to router.push Method . This method will towards history Add a new record to the stack , therefore , When the user clicks the browser Back button , Will go back to the previous URL.

When you click <router-link> when , This method will be called internally , So click <router-link :to="..."> Equivalent to calling router.push(...)

declarative programmatic
<router-link :to="...">router.push(...)

The parameter of this method can be a string path , Or an object that describes the address .

//  String path 
router.push('/users/eduardo')

//  Objects with paths 
router.push({
     path: '/users/eduardo' })

//  Named route , And add parameters , Let the route establish  url
router.push({
     name: 'user', params: {
     username: 'eduardo' } })

//  With query parameters , The result is  /register?plan=private
router.push({
     path: '/register', query: {
     plan: 'private' } })

//  belt  hash, The result is  /about#team
router.push({
     path: '/about', hash: '#team' })

Be careful : If provided path,params Will be ignored

// `params`  Cannot be associated with  `path`  Use it together 
router.push({
     path: '/user', params: {
     username } }) // -> /user

Replace current position

The functions and router.push similar , The difference is , It doesn't navigate to history Add new record

declarative programmatic
<router-link :to="..." replace>router.replace(...)

It can also be passed directly to router.push Of routeLocation Add an attribute to replace: true

router.push({
     path: '/home', replace: true })
//  amount to 
router.replace({
     path: '/home' })

Across history

The method takes an integer as a parameter , Indicates how many steps forward or backward in the history stack , Be similar to window.history.go(n).

//  Move a record forward 
router.go(1)
//  amount to 
router.forward()

//  Return a record 
router.go(-1)
//  amount to 
router.back()

//  Forward  3  Bar record 
router.go(3)

//  If there are not so many records , Silence fails 
router.go(-100)
router.go(100)

copyright notice
author[Rookie_ Xiao Ka kumou],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/04/202204291824543471.html

Random recommended