Vue-- routes with reference Jump - / login id = 10-- receiving this $ route.query.id?.

<! DOCTYPE HTML> 
<HTML lang = "EN"> 

<head> 
  <Meta charset = "UTF-. 8"> 
  <Meta name = "the viewport" Content = "width = Device-width, Initial-Scale = 1.0"> 
  < HTTP-equiv = Meta "X--the UA-Compatible" Content = "IE = Edge"> 
  <title> the Document </ title> 
  <Script the src = "./ lib / VUE-2.4.0.js"> </ Script> 
  <Script the src = "./ lib / VUE-Router-3.0.1.js"> </ Script> 
</ head> 

<body> 
  <div ID = "App"> 

    <-! in routing using a query string passed to the routing parameters, there is no need to modify routing rules path properties -> 
    <= Router-Link to "? / = 10 & Login ID = ZS name"> log </ Router-Link> 
    <router-link to="/register">注册</router-link>

    <router-view></router-view>

  </div>

  <script>

    var login = {
      template: '<h1> {{$ Log route.query.id} --- --- {{}}} $ route.query.name </ h1 of>', 
      Data () { 
        return { 
          MSG: '123' 
        } 
      }, 
      Created () {// lifecycle hook function component 
        // the console.log (. $ the this route) 
        // the console.log (. route.query.id the this $) 
      } 
    } 

    var {Register = 
      Template: ' <h1> Register </ h1 of> ' 
    } 

    var = new new Router VueRouter ({ 
      routes: [ 
        {path:' / Login ', Component: Login}, 
        {path:' / Register ', Component:} Register 
      ] 
    }) 

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

</html>

　　Mode 2

path: '/login/:id/:name'

Page assignment <router-link to = "/ login / 12 / ls"> log </ router-link> 
subassembly receiving

 $route.params.id

<!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 , the parameters passed to the routing, there is no need to modify routing rules path properties -> 
    < Router-Link to = "/ Login / 12 is / LS" > log </ Router-Link > 
    < Router-Link to = "/ Register" > Register </ 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 
        the console.log ( the this . route.params.id $) 
      } 
    } 

    var Register = { 
      Template: ' <h1 of> Register </ h1 > ' 
    } 

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

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      // router: router
      router
    });
  </script>
</body>

</html>

Vue-- routes with reference Jump - / login id = 10-- receiving this $ route.query.id?.

Guess you like