Vue 嵌套路由代替iframe

技术要点

Vue

vue-router

html / css

开始

首先定义一个初始的界面，如下所示：

HelloWorld.vue：

在这个界面中我们点击foo就可以将router-view切换为我们定义的另一个组件。

<template>
<div class="hello">
<router-link to="/foo">foo</router-link>
<router-view></router-view>
</div>
</template>

<script>
export default {
name: 'HelloWorld'
}
</script>

foo.vue

这个就是要显示出来的组件

<template>
<div id="foo">
嵌套路由
</div>
</template>

<script>
export default{
name: 'foo'
}
</script>

路由

如下这样定义，在使用浏览器访问时默认是访问HelloWorld组件的，而点击了组件内的foo后也会将foo组件显示出来。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import foo from '@/components/foo'

Vue.use(Router)

export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/:id',
component: HelloWorld,
children: [
{path: '/foo',component: foo}
]
}
]
})