16. The dynamic routing passed by value and get value

1. Dynamic Routing pass value 

1. Create a new directory components in the assembly vContent.vue

< Template > 
    < div > 
        < H2 > {{MSG}} </ H2 > 
        
    </ div > 
</ Template > 
< Script > 
Export default { 
  Data () { 
    return { 
        MSG: ' before assembly ' , 
    } 
  }, 
  Methods: { 
  }, 
  Mounted () { 
      the console.log ( the this $ route.params.); // Get the value of the dynamic routing pass 
  } 

} 
</ Script > 
<style lang="scss" scoped>
h2{
    color: red;
}
</style>

2. In the main.js

Joined:

{Path: '/ vcontent /: aid', component: vContent}, // dynamic routing

main.js：

Vue from Import 'VUE' ; 
Import from the App './App.vue' ; 

Import VueResource from 'Resource-VUE' ; 
Vue.use (VueResource) 


Import VueRouter from 'VUE-Router' ; 
Vue.use (VueRouter) 

// 1. Create assembly, import component 
import from Home './components/Home.vue' ; 
import from News './components/News.vue' ; 
import vContent from './components/vContent.vue' ;
 // 2. Configuring routing 
const routes = [ 
  　　{path: '/ Home' , Component: Home}, 
  　　{path: '/ News' , Component:News},

      path {: '/ vcontent /: AID', Component: vContent}, // Dynamic Routing 
      
      {path: '*', the redirect: '/ Home'} // default route goto 
]
 // Note that, here routes instead Routers 

// 3. examples of VueRouter 
const = Router new new VueRouter ({ 
  　　routes // (abbreviation) corresponds Routers: Routers 
}) 

// 4. mount 
new new Vue ({ 
  EL: '#app' , 
  Router, 
  the render: H => H (the App) 
}) 

// 5. the the <router-view> </ router -view> placed inside App.vue

3. In the News.vue

<template>
    <div>
        <h2>{{msg}}</h2>
        <ul>
            <li v-for="(item,index) in list" :key=index>
                <router-link :to="'/vcontent/'+index">
                    {{index}}---{{item}}
                </router-link> 
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  name: 'news',  
  data () {
    return {
        msg:'新闻组件',
        list:['111','222','333']
    }
  },
  methods:{
    
  },

}
</script>
<style lang="scss" scoped>
h2{
    color: red;
}
</style>
  

 

Dynamic routing by value:

1. The dynamic routing

Configuring routing 
const routes = [ 
      {path: '/ vcontent /: AID', Component: vContent}, // dynamic routing 
]

2. In the corresponding page

the this . $ route.params // get the value of dynamic routing pass over

2.get by value

1. Create a new directory components in the assembly Goods.vue

<template>
    <div>
        <h2>{{msg}}</h2>
        
    </div>
</template>
<script>
export default {
  name: 'goods',  
  data () {
    return {
        msg:'商品详情',
        
    }
  },
  methods:{
  },
  mounted(){
      console.log(this.$route.query);
  }

}
</script>
<style lang="scss" scoped>
h2{
    color: red;
}
</style>

2. Home Components Home.vue

<template>
    <div>
        <h2>{{msg}}</h2>
        <br>
        <ul>
            <li v-for="(item,index) in list" :key=index>
                <router-link :to="'/goods?aid='+index">
                    {{index}}---{{item}}
                </router-link> 
            </li>
        </ul>
        <br>
    </div>
</template>
< Script > 

Export default { 
  name: ' Home ' ,   
  Data () { 
    return { 
        MSG: ' Home component ' , 
        List: [ ' goods 111 ' , ' product 222 ' , ' Product 333 ' ] 
    } 
  }, 
  Methods: { 
    
  } , 
  Components: { 
  } 
} 
</ Script > 
< style lang = "SCSS" scoped >
h2{
    color: red;
}
</style>

3. Apply the configuration main.js

VueResource from Import 'VUE-Resource' ; 
Vue.use (VueResource) 


Import VueRouter from 'VUE-Router' ; 
Vue.use (VueRouter) 

// 1. Create assembly, import component 
import Home from './components/Home.vue ' ; 
Import from News ' ./components/News.vue' ; 
Import vContent from './components/vContent.vue' ; 

Import from Good './components/Goods.vue' ; 

// 2. configure routing 
const routes = [ 
  　　{path: '/ Home' , Component: Home}, 
  　　{path: '/ News' , Component: News}, 

      {path:'/ vcontent /: AID', Component: vContent}, // Dynamic Routing 

      {path: '*', the redirect: '/ Home'}, // default route goto 

      {path: '/ Goods' , Component: } Good, 
] 
// note that this is routes, rather than Routers 

// 3. examples of VueRouter 
const = Router new new VueRouter ({ 
  　　routes // (abbreviation) corresponds Routers: Routers 
}) 

// 4. mount 
new new Vue ({ 
  EL: '#app' , 
  Router, 
  the render: H => H (the App) 
}) 

// 5. the the <router-view> </ router -view> placed inside App.vue

 

Note, do not forget the reference in the root component App.vue

<template>
  <div id="app">
    <h2>{{msg}}</h2>

    <router-view></router-view>

    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>

  </div>
</template>
<script>

export default {
  name: 'app',
  data () {
    return { 
      msg:'根组件'
    }
  },
  methods:{
  },

}
</script>
<style>

</style>