zoukankan      html  css  js  c++  java
  • Vue路由嵌套的使用

    1.在路由配置页面中引入组件。

    2、在要对应的配置页面中添加映射关系: 

    const routes = [
      {
        path:'',
        //redirect重定向,默认打开的路径
        redirect:'/home'
      },
      {
      path:'/home',
      component:Home,
      children:[{
        path:'',
        redirect:'message'
      },
      {
        path:'message',
        component:HomeMessage
      },
      {
        path:'news',
        component:HomeNews
      }
        
      ]
      },
      {
        path:'/about',
        component:About
      },
      {
        path:'/user/:userid',
        component:User
      }
      ];
    

      

    3、在父组件中使用嵌套路由:

    <template>
      <div>
        <h1>我是Home页面</h1>
        <p>我是Home页面</p>
        <router-link to="/home/message"  >消息</router-link>
        <router-link to="/home/news" >新聞</router-link>
        <router-view></router-view>
      </div>
    
    </template>
    <script>
      export default {
        name:'Home'
      }
    
    
    </script>
    
    <style scoped>
    
    </style>
    

      

  • 相关阅读:
    javase 超市库存系统
    Javase 简单代码练习
    Javase 简单练习
    SQL表连接查询
    SQL多表查询
    SQL表查询
    SQL数据查询2
    SQL数据查询
    SQL增删改
    AutoCompleteTextView的使用
  • 原文地址:https://www.cnblogs.com/bzqs/p/14108268.html
Copyright © 2011-2022 走看看