子路由配置

Posted 2020-10-04 简单就好zyx

app.vue

<template>
<div id="app">
<h2>导航</h2>
<ul>
<li><router-link to="/" >Hello</router-link></li>
<li><router-link to="/Hi">Hi</router-link></li>
<li><router-link to="/Hi1">Hi頁面一</router-link></li>
<li><router-link to="/Hi2">Hi頁面二</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: ‘app‘
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
text-decoration: none;
}

</style>

main.js

import Vue from ‘vue‘
// 引用路由
import VueRouter from ‘vue-router‘
// 光引用不成，还得使用
Vue.use(VueRouter)
// 入口文件为 src/App.vue 文件 所以要引用
import App from ‘./App.vue‘
// 引用路由配置文件
import routes from ‘./router/index.js‘
// 使用配置文件规则
const router = new VueRouter({
routes
})
// 跑起来吧
new Vue({
router,
el: ‘#app‘,
render: (h) => h(App)
})

router/index.js

// 引用模板
import Hello from ‘../components/Hello.vue‘
import Hi from ‘../components/Hi.vue‘
import Hi1 from ‘../components/Hi1.vue‘
import Hi2 from ‘../components/Hi2.vue‘
// 配置路由
export default [
{
path: ‘/‘,
component: Hello
},
{
path: ‘/Hi‘,
component: Hi,
children:[
{
path: ‘/‘,
component: Hi
}, {
path: ‘/Hi1‘,
component: Hi1
}, {
path: ‘/Hi2‘,
component: Hi2
}
]
},
]

components/Hello.vue

<template>
<div>
{{msg}}
</div>
</template>
<script type="text/javascript">
export default{
name:‘Hello‘,
data () {
return{
msg:"hello page"
}
}
}
</script>

components/Hi.vue

<template>
<div>
{{msg}}
</div>
</template>
<script type="text/javascript">
export default{
name:‘Hi‘,
data () {
return{
msg:"hi page"
}
}
}
</script>
<style type="text/css">

</style>

components/Hi1.vue

<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script type="text/javascript">
export default{
name:‘Hi1‘,
data () {
return{
msg:"hi1 page"
}
}
}
</script>
<style type="text/css">

</style>

components/Hi2.vue

<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script type="text/javascript">
export default{
name:‘Hi2‘,
data () {
return{
msg:"hi2 page"
}
}
}
</script>
<style type="text/css">

</style>