Vue.js 使用children属性实现路由嵌套

柔情只为你懂 2022-03-17 14:22 510阅读 0赞

## 使用 `children` 属性实现路由嵌套 ##

<div id="app">
        <router-link to="/account">Account</router-link>
    
        <router-view></router-view>
      </div>
    
      <script>
        // 父路由中的组件
        const account = Vue.extend({
          template: `<div>
            这是account组件
            <router-link to="/account/login">login</router-link> | 
            <router-link to="/account/register">register</router-link>
            <router-view></router-view>
          </div>`
        });
    
        // 子路由中的 login 组件
        const login = Vue.extend({
          template: '<div>登录组件</div>'
        });
    
        // 子路由中的 register 组件
        const register = Vue.extend({
          template: '<div>注册组件</div>'
        });
    
        // 路由实例
        var router = new VueRouter({
          routes: [
            { path: '/', redirect: '/account/login' }, // 使用 redirect 实现路由重定向
            {
              path: '/account',
              component: account,
              children: [ // 通过 children 数组属性，来实现路由的嵌套
                { path: 'login', component: login }, // 注意，子路由的开头位置，不要加 / 路径符
                { path: 'register', component: register }
              ]
            }
          ]
        });
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          components: {
            account
          },
          router: router
        });
      </script>

代码：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <script src="./lib/vue-router-3.0.1.js"></script>
    </head>
    
    <body>
      <div id="app">
    
        <router-link to="/account">Account</router-link>
    
        <router-view></router-view>
    
      </div>
    
      <template id="tmpl">
        <div>
          <h1>这是 Account 组件</h1>
    
          <router-link to="/account/login">登录</router-link>
          <router-link to="/account/register">注册</router-link>
    
          <router-view></router-view>
        </div>
      </template>
    
      <script>
    
        // 组件的模板对象
        var account = {
          template: '#tmpl'
        }
    
        var login = {
          template: '<h3>登录</h3>'
        }
    
        var register = {
          template: '<h3>注册</h3>'
        }
    
        var router = new VueRouter({
          routes: [
            {
              path: '/account',
              component: account,
              // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
              children: [
                { path: 'login', component: login },
                { path: 'register', component: register }
              ]
            }
            // { path: '/account/login', component: login },
            // { path: '/account/register', component: register }
          ]
        })
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router
        });
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nja2V2aW5jeWg_size_16_color_FFFFFF_t_70]: /images/20220317/c6835513dca64b049f220b7509a18295.png