第一步:News.vue
<template>
<div>
<h2>News</h2>
<br>
<router-link to="/details">Details</router-link>
<router-view></router-view> <!-- 嵌套 -->
</div>
</template>
<style scoped> div{ background-color: aqua; } </style>
第二步:Details.vue
<template>
<div>
<h2>Details</h2>
</div>
</template>
<style scoped> div{ text-align: center; font-size: 38px; color: sienna; } </style>
第三步:router目录下的index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
// 将Vue挂载到Router中,接下来就可以使用Router了
Vue.use(VueRouter)
const routes = [{
path: '/news',
component: () => import('../views/News.vue'), // 懒加载
children: [{
path: '/details',
component: () => import('../views/Details') // 懒加载
}]
}]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
效果:
- News页面:

- 单击Details

还没有评论,来说两句吧...