router-view的使用方法
序言
开发的时候有时候会遇到一种情况，比如 ：点击这个链接跳转到其他组件的情况，通常会跳转到新的页面，但是我们不想跳转到新页面，只在当前页面切换着显示，那么就要涉及到路由的嵌套了，也可以说是子路由的使用。
在需要嵌套的页面的路由地址中添加children属性,添加对应的路径
使用方法
rounter.js
代码如下:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Index from '../views/index.vue'
import a from '../views/a/a'
import b from '../views/b/b'
import c from '../views/c/c'
const routes = [
{
path: '/',
name: 'index',
component: Index,
children: [
{ path: 'a', name: 'a', component: a },
{ path: 'b', name: 'b', component: b },
{ path: 'c', name: 'c', component: c },
{ path: '/', name: 'a', component: a}
// path表示的为 / 默认路径显示的是a组件
],
},
]
const router = new VueRouter({
routes,
})
// 取消 路由重复 报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
export default router
主页面index.js
代码如下:
<template>
<div style="background-color:#F5F7F9;height:100%" class="flex">
<!-- 侧面菜单 -->
<Menu idDivProp="shift" v-on:address="getAddress"></Menu>
<router-view></router-view>
</div>
</template>
<script>
import Menu from '../components/menu'
export default {
components: {
Menu,
},
data() {
return {
}
},
methods: {
//页面跳转
jumpPage(value) {
this.$router.push(value)
},
getAddress(value) {
this.jumpPage(value)
},
},
created() {},
mounted() {},
}
</script>
<style lang="scss" scoped></style>
在组件Menu中返回给主页面index.js地址参数用于切换router-view
menu组件
返回给主页面index.js的地址参数的方法:
deliverAddress(value) {
let key = value.key
switch (key) {
case '1': //点击a
this.$emit('address', 'a')
break
case '2': //点击b
this.$emit('address', 'b')
break
case '3': //点击c
this.$emit('address', 'c')
break
default:
break
}
},
最后
也可使用组件router-link跳转,具体可参考如下文献:
