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

    路由的嵌套
      1.配置路由
      2.<router-view></router-view>

    示例代码:

    import Vue from 'vue'
    import App from './App.vue'
    import News from './components/News.vue'
    import NewsList from './components/NewList.vue'
    import NewsAdd from './components/NewsAdd.vue'
    
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    
    
    
    const routes = [{
      path: '/news',
      component: News,
      children: [{
        path: 'list',
        component: NewsList
      },{
        path: 'add',
        component: NewsAdd
      }]
    }]
    
    const router = new VueRouter({
      routes
    });
    
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })
    <template>
      <div id="app">
        App
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    <style lang="scss">
    
    </style>
    <template>
        <div id="news">
            News组件
            <hr>
            <router-link :to="'/news/list'">列表</router-link>
            <router-link :to="'/news/add'">添加</router-link>
            <router-view></router-view>
        </div>
    </template>
    <template>
        <div id="newsadd">
            NewsAdd组件
        </div>
    </template>
    <template>
        <div id="newslist">
            NewsList组件
        </div>
    </template>
  • 相关阅读:
    java-oop集合map
    IDEA启动Tomcat报错
    1.IDEM的快捷键
    1.idea快捷键
    14.
    13.级联一对多
    12.动态SQL
    11.动态参数
    10.主键回填
    9.参数的传递
  • 原文地址:https://www.cnblogs.com/chenyishi/p/9183559.html
Copyright © 2011-2022 走看看