Two kinds vue-router implementations navigation ways:
1. <router-link: to = " ..."> achieved : to point to an object inside} {path, name, query and other properties, the route navigation of the route may be provided, passing parameters, component name
. 1 <div ID = "App"> 2 <- two ways of passing parameters Query! // - the params> . 3 <Router-Link: to = "{path: 'Login', Query: {ID: 100} } "> Sign </ Router-Link> . 4 <Router-Link: to =" {name: 'Register', the params: {name: 'Han'}} "> Register </ Router-Link> . 5 ! <- components placeholder -> . 6 <Router-View> </ Router-View> . 7 </ div> . 8 . 11 <Script> 12 is // Create two monovalent groups, respectively, Login, Register 13 is var Login = { 14 Template: "<h3>I am a login component --- the this parameter {{. $ Route.query.id}} </ h3> " , 15 Data () { 16 return {} . 17 }, 18 is Mounted () { . 19 the console.log ( the this $ route.query.id.); // Output 100 20 is } 21 is } 22 is var Register = { 23 is Template: "<H3 > I --- is a registered component the this parameter {{.}} $ route.params.name </ H3> " , 24 Data () { 25 return {} 26 is }, 27 Mounted () { 28 the console.log ( the this. $ route.params.name); // output Han 29 } 30 } 31 is 32 // Create Route Object: 33 is const = Router new new VueRouter ({ 34 is routes: [ 35 {path: '/ Login' , Component: Login} , 36 {path: '/ Register', name: 'Register' , Component: Register}, 37 [ 38 is ] 39 }) 40 var VM = new new Vue ({ 41 is EL: "#app" , 42 is Data: {}, 43 is router 44 45 })
Note: Use <router-link to = ""> when used in specification
1 // string 2 <-Link to Router = "Apple"> to Apple </ Router-Link> . 3 // objects . 4 <Router-Link: to = "{path: 'Apple'}"> to Apple </ Link-Router> . 5 // named route . 6 <Router-Link: to = "{name: 'applename'}"> to Apple </ Router-Link> . 7 // direct route with the query parameter query, into the address bar / ? Color = Red Apple . 8 <Router-Link: to = "{path: 'Apple', query: {Color: 'Red'}}"> to Apple </ Router-Link> . 9 // named routing query with the query parameter , into the address bar / Apple Color = Red? 10 <Router-Link: to = "{name: 'applename', Query: Color {: ' red' }}"> to apple</router-link> 11 //Router direct routing parameter params, params does not take effect if the provided path, params is ignored 12 is <Router-Link: to = "{path: 'Apple', the params: {Color: 'Red'}}"> to Apple </ Link-Router> 13 is // named Router routing parameter params, the address bar is / Apple / Red 14 <Router-Link: to = "{name: 'applename', the params: {Color: 'Red'}}" > to apple </ router-link >
2. $ router.push ({}) to implement routing Jump
. 1 <div ID = "App"> 2 <-! Two ways of passing parameters Query // the params -> . 3 <-! <Login> </ Login> . 4 <Register> </ Register> -> 5 <! - component placeholders -> . 6 <Router-View> </ Router-View> . 7 </ div> . 8 . 9 <Template ID = "Login"> 10 <div> . 11 <H3> I component is logged --- parameters {{ the this . route.query.name $}} </ H3> 12 is <= Button @ the Click "Back ()"> jump to login component </ Button> 13 is < /div> 14 </template> 15 16 <Template ID = "Register"> . 17 <div> 18 is <H3> --- I register component parameters {{ the this . route.query.name $}} </ H3> . 19 <= Button @ the Click "Next () "> jump to the login component </ Button> 20 is </ div> 21 is </ Template> 22 is 23 is <Script> 24 // Create two monovalent groups, respectively, login, Register 25 var login = { 26 is Template:" # Login " , 27 Data () { 28 return {} 29 }, 30 mounted(){ 31 console.log(this.$route.query.name); // 输出 100 32 }, 33 methods:{ 34 back(){ 35 this.$router.push({name:'register',query:{name:"杨芳芳"}}) 36 } 37 } 38 } 39 var register ={ 40 template:"#register", 41 data(){ 42 return{} 43 }, 44 mounted(){ 45 the console.log ( the this . $ Route.query.name); // output Han 46 is }, 47 Methods: { 48 Next () { 49 the this $ router.push ({name: 'Login', Query: {name. : "Bin" }}) 50 } 51 } 52 } 53 is 54 is // Create route Object: 55 const = Router new new VueRouter ({ 56 is routes: [ 57 is {path: '/ Login', Component: Login, name: ' Login ' }, 58 {path:'/register', name:'register',component:register}, 59 60 ] 61 }) 62 var vm = new Vue({ 63 el: "#app", 64 data: {}, 65 router, 66 components:{ 67 login,register 68 } 69 70 }) 71 </script>
The code analysis: first create the two components login // register, and create a route object, configure routing rules. In the trigger internal components ---> this $ router.push ({name: 'component name', query: {}} parameter) by the event.
Note: $ router.push ({name: 'component name', query: {}} parameters) of the usage rule:
1 // string 2 router.push ( 'Apple' ) . 3 // objects . 4 router.push ({path: 'Apple' }) . 5 // named route . 6 router.push ({name: 'applename' }) . 7 // direct route with the query parameter query, into the address bar / Apple Color = Red? . 8 router.push ({path: 'Apple', query: {Color: 'Red' }}) . 9 // named routes of query parameters Query, into the address bar / Apple Color = Red? 10 router.push ({name: 'applename', Query: {Color: 'Red' }}) . 11 // routed directly Router parameter params, params does not take effect, if provides a path, params is ignored 12router.push ({path: 'applename', the params: {Color: 'Red' }}) 13 is // named Router routing parameter params, the address bar is / Apple / Red 14 router.push ({name: 'applename' , params: {color: 'red '}})