Vue-router notes

1. Dynamic Route Matching

For example: (Advanced matching for dynamic routing)

Https://github.com/vuejs/vue-router/blob/next/examples/route-matching/app.js

2. Programming navigation

(1) router.push (...)

Use Router.push (...) "Equivalent to <router-link to=" ... "> (declarative)" created, this method adds a new record to the history stack, and returns the previous URL when the user clicks the browser back

The parameter of the method can be either a string path or an object that describes the address.

Like what:

String

Router.push (' home ')

Object

Router.push ({path: ' Home '})

Named routes

Router.push ({name: ' user ', params: {userid:123}})

With query parameters, become/register?plan=private

Router.push ({path: ' register ', query: {plan: ' Private '}})

(2) router.replace (location)

The router.push only difference is that it does not add a new record to the history, but is the same as its method name-replacing the current history record

(3) router.go (n)

The parameter of this method is an integer that means how many steps forward or backward in the history record, likewindow.history.go(n)

Like what:

One step forward in the browser record, equivalent to History.forward ()

router.go(1)

Step back record, equivalent to History.back ()

router.go(-1)

3 Step forward Record

router.go(3)

If the history record is not enough, then silently fail.

router.go(-100)

router.go(100)

3. Named routes

Named routes are used: (Note: Remember to add one:)

<li><router-link:to= "{name: ' Nameroute '}" > named route </router-link></li>

<li><router-link:to= "{name: ' Namerouterone ', params: {id:123}}" > Named route Des </router-link></li>

4. Named Views:

{

Path: '/nameview/child ',

Components: {

Default:nameviewone,

A:nameviewtwo,

B:nameviewthree

}

}

5. redirect

redirect one page to another page

For example: Https://github.com/vuejs/vue-router/blob/next/examples/redirect/app.js

Redirection is also routes done through configuration, the following example is from /a redirection to /b :

Const  NEW VueRouter({

  routes: [

'/A '  '/b ' }

  ]

})

The target of a redirect can also be a named route:

Const  NEW VueRouter({

  routes: [

'/a '  foo ' }}

  ]

})

Even a method that dynamically returns a redirect target:

Const  NEW VueRouter({

  routes: [

'/A ', redirect: to => {

Method receives the destination route as a parameter

Return redirect string path/Path object

const {hash, params, query} = to

if (query.to = = = ' Foo ') {

return {path: '/foo ', query:null}

}

if (hash = = = ' #baz ') {

return {name: ' Baz ', Hash: '}

}

if (params.id) {

Return '/with-params/:id '

} else {

Return '/bar '

}

}}

  ]

})

6. Aliases

It is possible to change the path name of a page to the current one.

Like what:

This will change the path to "/foo" component to Alias, the original is replaced by the

{

Path: '/alias ',

Component: "Alias",

Alias: "/foo"

},

More notes, waiting to be updated ~

Vue-router notes