Vue routing rules - pass parameters

1, query methods to obtain the parameter

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script the src = "./ lib / VUE-Router-3.0.1.js" > </ Script > 
</ head > 

< body > 
  < div ID = "App" > 
    <-! If the route that query string , to the routing transmission parameters, there is no need to modify routing rules path properties -> 
    < Router-Link to = "? / Login ID = 10 & name = ZS" > log </ Router-Link > 
    < Router-Link to = "/ Register? ABC = 123 " > Register </ Router-Link > 
    < Router-View > </ Router-View >
  </div>

  < Script > 

    var Login = { 
      Template: ' <h1 of> log {{$ route.query.id} --- --- {{}}} $ route.query.name </ h1 of> ' , 
      Data () { 
        return { 
          MSG: ' 123 ' 
        } 
      }, 
      Created () { // lifecycle hook function component 
        console.log ( the this . $ route)
         // where parameters used to acquire the routing query came to bring attention 
        console.log ( the this . $ route.query.id) 
        the console.log ( the this . route.query.name $) 
      } 
    }

    var register = {
      template: '<h1>注册</h1>',
      created(){
        console.log(this.$route.query.abc)
      }
    }

    var router = new VueRouter({
      routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
      ]
    })

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      EL: ' #app ' , 
      Data: {}, 
      Methods: {}, 
      // attribute name with the same attribute values need to write a name 
      // Router: Router 
      Router 
    }); 
  </ Script > 
</ body > 

</ HTML >

2, params way to get parameters

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <script the src = "./ lib / VUE-Router-3.0.1.js" > </ Script > 
</ head > 

< body > 
  < div ID = "App" > 

    <-! If the routing in accordance with routing rules the parameters to pass parameters -> 
    < Router-Link to = "/ the Login / 12 / LS" > Log </ Router-Link > 
    < Router-Link to = "/ the Register / I parameter" > Register </ add the Router- Link > 

    < Router-View > </ Router-View > 

  </div>

  <script>

    var Login = { 
      Template: ' <h1 of> log {{$ route.params.id} --- --- {{}}} $ route.params.name </ h1 of> ' , 
      Data () { 
        return { 
          MSG : ' 123 ' 
        } 
      }, 
      Created () { // lifecycle hook function component 
      // with acquisition parameters params to 
        the console.log ( the this $ route.params.id.) 
      } 
    } 

    var Register = { 
      Template: ' <h1 of > Register - {{}} $ route.params.a </ h1 of> ' , 
      Created () {// lifecycle hook function component 
      // with acquisition parameters params to 
        the console.log ( the this $ route.params.a.) 
      } 
    } 

    Var Router =  new new VueRouter ({ 
      routes: [ 
        @ in routing rules by: shape parameter pass parameters to set values 
        {path: ' / Login /: ID /: name ' , Component: Login}, 
        {path: ' / Register /: a ' , Component: Register} 
      ] 
    }) 

    // Create instance Vue give the ViewModel 
    var VM =  new new Vue ({ 
      EL: ' #app ',
      data: {},
      methods: {},
      // router: router
      router
    });
  </script>
</body>

</html>

Vue routing rules - pass parameters

Guess you like