一篇搞定VUE嵌套路由使用(router-view)
router-view介绍
- router-view是vue-router里的一小块知识点,但是很重要,很多tab栏切换都会用到,字面意思是路由视图,其实很贴切,通俗的说就是一块显示区域,你可以通过路由来控制他的显示内容,好处就是浏览器不会重载,非常适合SPA应用的开发
- 先看一个效果图
使用详解:
- 首先下载vue-router,并且挂载,这里不细说,百度一堆
- 我们需要一个主页面,放置router-view,作为展示页面
- 然后需要几个子页面,放在主页面中的router-view展示
上代码
- 主页面:App.vue,
<template>
<div id="app">
<router-view></router-view>
<router-link :to="{name:'H1'}">H1页面</router-link>
<router-link :to="{name:'H2'}">H2页面</router-link>
</div>
</template>
小结:这里是主页面,子页面要展示的内容都会在router-view标签内展示,router-link标签是操控router-view中显示页面的路由,:to就是点击展示的意思,这里可以展示name为H1,H2的三个路由名称对应的页面
- 默认展示页面
<template>
<div class="hello">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<router-view></router-view>
<div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
这个页面我们作为默认展示页面,这个页面会被展示再App.vue的router-view里面,我们的子页面会展示再这个页面的router-view里面
- 点击展示的H1,H2
//h1
<template>
<div class="hellow">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg:'我是h1'
}
},
}
</script>
//h2
<template>
<div class="hellow">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
return {
msg:'我是h2'
}
},
}
</script>
小结:这就是两个普通的展示页面,对等于你项目中要展示的内容
超级重点,配置路由文件
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children:[{
path:'h1',
name:'H1',
component:H1
},{
path:'h2',
name:'H2',
component:H2
},
]
}
]
小结:首先当路径为/时候,展示我们的默认展示页面Helloworld,然后这里注意了,这里写了一个children,说明这里面的的都是Helloworld页面的子路由,这些页面将来会展示在HelloWorld页面中的router-view中,所以一个页面中的router-view是用来展示这个页面路由下面的子路由的,
总结:
嵌套路由整体来说分为几个核心:
路由配置页面,设置默认路由,然后你想在哪个页面写嵌套路由,就在这个路由中写子路由
子路由跳转及其展示,router-link,帮助我们操作要在router-view中展示的子路由页面
如果还有不懂的地方,可以私信留言,不足的地方欢迎指出,谢谢大家