zoukankan      html  css  js  c++  java
  • 嵌套路由

    1、配置嵌套路由src/router/index.js

    /*
    路由器模块
     */
    
    // 引入Vue
    import Vue from 'vue'
    
    // 引入路由器插件
    import VueRouter from 'vue-router'
    
    // 引入路由组件
    import About from '../views/About'
    import Home from '../views/Home'
    import News from '../views/News'
    import Message from '../views/Message'
    
    // 声明使用路由器插件
    Vue.use(VueRouter)
    
    // 向外暴露路由器对象。这里为默认暴露,则引入的时候可使用任何名字
    export default new VueRouter({
      // 配置N个路由
      // path指定路由地址
      // component指定路由地址对应的路由组件
      // redirect重定向到某个路由
      routes: [
        {
          path: '/about',
          component: About
        },
        {
          path: '/home',
          component: Home,
          // children配置嵌套路由
          children: [
            {
              path: '/home/news',
              component: News
            },
            {
              path: 'message', // 等效于/home/message
              component: Message
            },
            {
              path: '', // 路径/home时会自动跳转到路径/home/news
              redirect: '/home/news'
            }
          ]
        },
        {
          // 访问项目根路径时重定向到/about路由
          path: '/',
          redirect: '/about'
        }
      ]
    })

    2、使用嵌套路由

    <div>
          <ul class="nav nav-tabs">
            <li><router-link to="/home/news">News</router-link></li>
            <li><router-link to="/home/message">Message</router-link></li>
          </ul>
          <router-view></router-view>
    </div>
  • 相关阅读:
    SCM Introduction
    upper lower capitalize and title
    isinstance
    splitlines
    使用 UITableView 创建表格应用演练(4)——自定义单元格
    高性能网站的十四条黄金法则
    javascript设计模式继承(上)
    这些年,我收集的JavaScript代码(一)
    ObjectiveC语法之KVO的使用
    面试中的Singleton
  • 原文地址:https://www.cnblogs.com/liuyang-520/p/12676473.html
Copyright © 2011-2022 走看看