vue.js学习日记-路由篇(脚手架工具篇)

main.js

import Vue from 'vue'
import APPLE from './components/APPLE.vue'
import BANANA from './components/BANANA.vue'
import App from './App'
import VRouter from 'vue-router'//映入

Vue.config.productionTip = false
Vue.use(VRouter)

let router=new VRouter({
routes:[{
//path:'/banana',
path:'/banana',//跟一个color参数
component:BANANA
},
{ path:'/apple/:color/detail/:type',
component:APPLE}
]
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

APPLE.vue

<template>
<div class="hello">
<p>{{msg}}</p>
<p>{{$route.params}}</p>
<p>{{$route.params.color}}</p>
<button v-on:click="getArray">点击我获得参数</button>
</div>
</template>

<script>
export default {
name:"hello",
data () {
return {
msg: 'I AM A APPLE'
}
},
methods:{
getArray:function(){
console.log(this.$route.params)
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

BANANA.vue

<template>
<div class="hello">
<p>{{msg}}</p>

</div>
</template>

<script>
export default {
name:"hello",
data () {
return {
msg: 'I AM A BANANA'
}
},
methods:{
getArray:function(){
console.log(this.$route.params)
}
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

APP.vue

<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
<router-link v-bind:to="{path:'apple'}">go to apple</router-link>
<router-link v-bind:to="{path:'banana'}">go to banana</router-link>
</div>
</template>

<script>
export default {
name: 'app',
components:{

}
}
</script>

<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

嵌套子路由

main.js

{ path:'/apple',
component:APPLE,
children:[
{
path:'red',
component:RedApple
}
]
}

APPLE.vue

<template>
<div class="hello">
<p>{{msg}}</p>
<p>{{$route.params}}</p>
<p>{{$route.params.color}}</p>
<button v-on:click="getArray">点击我获得参数</button>

<router-view></router-view>
</div>
</template>

访问方式http://localhost:8080/#/

也可以添加  <router-link v-bind:to="{path:'apple/red'}">go to applered</router-link>进行访问

 

 

 

转载于:https://www.cnblogs.com/LiuCaoMei/p/7565490.html