<Template>
<div>
<- two ways to achieve routing vue page jump -!>
<div style = "background: Pink;">
! <- The first way ---- by <router- link> achieved ->
<H3> a first embodiment of the implement page jump </ H3>
<UL>
<-Link to Router = "/ layout-One / AAAA"> switch. 1 </ Router-link>
<router- link: to = " '/ layout -one / bbbb'"> switch 2 </ Router-Link>
<Router-Link: to = "{path: '/ layout-One / CCCC'}"> switch 3 </ router -Link>
<Router-Link: to = "{name: 'dddd'}"> switch. 4 </ Router-Link>
<- 1. parameter passing wording ->!
<!- pass the reference code with the following wording as params, and also need to be configured in router.js eeee path, the path added after the eeee /: and corresponding to the userId (Example path: 'eeee /: userId') ; ->
<! - get a new page to pass over the parameter userId ---- use this hook mounted in the $ route.params.userId, -.>
<router-link: to = " {name: 'eeee', params: {userId: msg}}"> switch. 5 </ Router-Link>
<-! 2. incoming address to key ->
<! - ---- incoming address value pairs written as the following code in query (without the method 1 and method as in the rearrangement path router.js) ->
<Router-Link: to = "{path: ' / layout-one / ffff ', query: {plan: msg0}} "> switch. 6 </ Router-Link>
</ UL>
</ div>
<div style =" background: Pink; ">
<- on! two ways ->
<h3> the second way to achieve the page jump </ h3>
<-! 1. parameter passing wording ->
<@ the Click the Button = "toURL"> jump page 7 </ button >
<! - 2. parameter passing wording ->
<@ the Click the Button = "toURL1">Jump page 8 </ the Button>
<-! Incoming address key-value pairs ->
<@ the Click the Button = "toURL2"> jump page 9 </ the Button>
</ div>
<div style = "background: Pink;">
<H3> in the index.js router, as long as the routing of the assembly of all sub-routes configuration, no matter how to jump between them are in the parent of this display </ h3> router-view in
<Router-View> </ Router-View>
</ div>
</ div>
</ Template>
<Script>
Export default {
Data () {
return {
MSG: "to pass eeee component parameter page ",
the Msg0:" to pass ffff components page parameters ",
msg1:" to pass parameters gggg components page ",
msg2:" hhhh arguments to the component pages ",
msg3:" to parameters passed to the page component iiii ",
}
},
Methods: {
the toURL () {
. router.push the this $ ({path: '/ Layout-one / gggg ', query: {plan: this.msg1}.}) // jump assembly and carries the parameters, this used to jump to the assembly plan reception parameters $ route.query.plan
},
toURL1 () {
. this $ router.push ({name: 'hhhh', params: {userId: this.msg2}}). // jump assembly and carries the parameters, this assembly to jump in with $ route.query.plan receiving parameters Plan
},
toURL2 () {
. router.push the this $ ({name: 'iiii', the params: {the userId: 'iiii arguments to the page assembly 1'}, query: {plan : this.msg3} })
}
},
beforeCreate () {
},
Created () {
},
beforeMount () {
},
Mounted () {
},
beforeUpdate () {
},
Updated () {
},
beforeDestroy () {
},
Destroyed () {
}
}
</ Script>
<style>
</ style>