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>进行访问
