Vue路由及嵌套路由

Posted 2020-09-12 FF盖世英雄CC

router.js

import Vue from ‘vue‘
import VueRouter from ‘vue-router‘

Vue.use(VueRouter)

const first = {template:‘<h1>first</h1>‘}
const second = {template:‘<h1>second</h1>‘}
const home = {template:‘<h1>home</h1>‘}
const lala = {
template:`
<div class="lala">
<h2>组件</h2>
<router-view class="lalala"></router-view>
</div>
`
}
const firstfirst = {template:‘<h1>firstfirst</h1>‘}
const secondsecond = {template:‘<h1>secondsecon</h1>‘}

const router=new VueRouter({
mode:‘history‘,
base:__dirname,
routes:[
{path:‘/‘, component:home},
{path:‘/first‘, component:lala,
children:[
{path:‘/first‘, component:firstfirst},
{path:‘/second‘, component:secondsecond}
]
},
{path:‘/second‘, component:second}
]
})
new Vue({
router,
template:` <div id="r">
<h1>导航</h1>
<ol>
<li><router-link to = "/">/</router-link></li>
<li><router-link to = "/first">first</router-link></li>
<ol>
<li><router-link to = "/first">first</router-link></li>
<li><router-link to = "/second">second</router-link></li>
</ol>
<li><router-link to = "/second">second</router-link></li>
</ol>
<router-view> </router-view>
</div>

`}).$mount(‘#app‘)