Nesting of VUE-routing

notes

• router-link is the tag provided in vue and will be rendered as a tag by default
• The to attribute will be rendered as an href attribute by default
• The value of the to attribute will be rendered as a hash address starting with # by default
• router-view is the route filling position, rendering the component corresponding to the specified route

First introduce vue.js, then introduce vue-router.js

   <router-link to="/user">User</router-link>
   <router-link to="/register">Register</router-link>
   <!-- 路由填充位 -->
   <router-view></router-view>

Define the parent routing component

 // 定义路由组件（register为要展示的父组件 即要被嵌套的组件）
    var User = {
    
    
      template: '<h1>User组件</h1>'
    }
    var Register = {
    
    
      template: `<div>
        <h1>register组件</h1>
        <hr/>
        <!--子路由链接-->
        <router-link to="/register/tab1">tab1</router-link>
        <router-link to="/register/tab2">tab2</router-link>
        <!--子路由填充符-->
        <router-view></router-view>
        </div>`

    }

Define child routing components

// 创建子组件 父组件为Register
    var tab1 = {
    
    
      template: '<h3>tab1子组件</h3>'
    }
    var tab2 = {
    
    
      template: '<h3>tab2子组件</h3>'
    }

Create a routing instance

const router = new VueRouter({
    
    
      routes: [
        //默认显示
        {
    
    
          path: '/',
          redirect: '/user'
        },
        {
    
    
          path: '/user',
          component: User
        },
        {
    
    
          path: '/register',
          component: Register,
          // 子路由
          children: [{
    
    
              path: '/register/tab1',
              component: tab1
            },
            {
    
    
              path: '/register/tab2',
              component: tab2
            }
          ]
        },
      ]
    })

Finally, mount the routing instance object

var vm = new Vue({
    
    
      el: '#app',
      data: {
    
    },
      methods: {
    
    },
      //挂载路由实例对象
      router: router
    });

Effect