阅读 390

10分钟学会嵌套路由的使用(router-view)

一篇搞定VUE嵌套路由使用(router-view)

router-view介绍

  • router-view是vue-router里的一小块知识点,但是很重要,很多tab栏切换都会用到,字面意思是路由视图,其实很贴切,通俗的说就是一块显示区域,你可以通过路由来控制他的显示内容,好处就是浏览器不会重载,非常适合SPA应用的开发
  • 先看一个效果图
img
img

使用详解:

  • 首先下载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中展示的子路由页面

    如果还有不懂的地方,可以私信留言,不足的地方欢迎指出,谢谢大家