在 vue 中使用 router 进行前端路由，可实现不跳转切换页面或局部切换页面，而且往往需要进行局部切换页面的地方不止一个，此时就需要用到 多路由 或 路由嵌套 来实现。
1、简单路由（单路由）
- App.vue:
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
- Test.vue:
<template>
<div id="testModule">
<p>我是 test 组件页面</p>
</div>
</template>
<script>
export default {
name: 'TestModule'
}
</script>
- router.js
import Vue from 'vue'
import Router from 'vue-router'
import TestModule from '@/components/Test'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Test',
component: TestModule
}
]
})
2、多路由
一个页面存在多个路由时，除了默认路由以外，其余路由通过属性 ‘name’ 来做区分。
- App.vue:
<template>
<div id="app">
<router-view />
<router-view name="test2" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
- Test.vue:
<template>
<div id="testModule">
<p>我是 test 组件页面</p>
</div>
</template>
<script>
export default {
name: 'TestModule'
}
</script>
- Test2.vue:
<template>
<div id="testModule2">
<p>我是 test 2 组件页面</p>
</div>
</template>
<script>
export default {
name: 'TestModule2'
}
</script>
- router.js
import Vue from 'vue'
import Router from 'vue-router'
import TestModule from '@/components/Test'
import TestModule2 from '@/components/Test2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Test',
components: {
default: TestModule, // 默认路由
test2: TestModule2 // name 为 'test2' 的路由
}
}
]
})
3、嵌套路由
一个路由里面的子组件中，还存在另一个路由，这时就成为了嵌套的路由。
- App.vue:
<template>
<div id="app">
<router-view />
<router-view name="test2" />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
- Test.vue:
<template>
<div id="testModule">
<p>我是 test 组件页面</p>
<div>下面是子组件的路由</div>
<router-view name="testSub" />
</div>
</template>
<script>
export default {
name: 'TestModule'
}
</script>
- TestSub.vue:
<template>
<div id="testModuleSub">
<p>我是 test sub 组件页面</p>
</div>
</template>
<script>
export default {
name: 'TestModuleSub'
}
</script>
- Test2.vue:
<template>
<div id="testModule2">
<p>我是 test 2 组件页面</p>
</div>
</template>
<script>
export default {
name: 'TestModule2'
}
</script>
- router.js
import Vue from 'vue'
import Router from 'vue-router'
import TestModule from '@/components/Test'
import TestModuleSub from '@/components/TestSub'
import TestModule2 from '@/components/Test2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Test',
components: {
default: TestModule, // 默认路由
test2: TestModule2 // name 为 'test2' 的路由
},
children: [ // 子路由嵌套
{
// 通过 'http://ip/testsub/' 来访问子路由
path: 'testsub',
components: {
// TestModule 里面 name 为 'testSub' 的路由
testSub: TestModuleSub
}
}
]
}
]
})
