import Vue from 'vue'
import Router from 'vue-router'
//引入组件
import HelloWorld from '@/components/HelloWorld'
import demo1 from '@/components/demo1'
import demo2 from '@/components/demo2'
import demo3 from '@/components/demo3'
Vue.use(Router)
export default new Router({
routes: [{
path: '/', //链接路径
name: 'HelloWorld', //路由名称,
component: HelloWorld, //对应的组件模板
},
{
path: '/demo1', //path 随意编名字就行 跳转的时候是这个名字
name: 'demo1',
component: demo1,
children: [ //子路由,嵌套路由 (此处偷个懒,免得单独再列一点)
{
name: "demo3",
path: 'demo3',
component: demo3,
},
]
},
{
path: '/demo2',
name: 'demo2',
component: demo2,
}
]
})
1.字路由使用方式
demo1
<template>
<div class="hello">
这是模板1
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
</style>
demo2
<template>
<div class="hello">
<h1>这是模板3第三方个</h1>
</div>
</template>
<script>
export default {
name: 'demo3',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
</style>
app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<button @click="onlick1(0)">路由1</button>
<button @click="onlick1(1)">路由2</button>
<button @click="onlick1(2)">路由3</button>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
created() {
},
methods:{
onlick1(index){
if(index==0){
this.$router.push({
path:"/demo1"
});
}else if(index==1) {
this.$router.push({
path:"/demo2"
});
}else{
this.$router.push({
path:"/demo1/demo3"
});
}
},
}
}
</script>
<style>
</style>
想要访问子路由,
必须在父路由界面添加 router-view标签