vue中路由中使用 children 来实现路由的嵌套

最新推荐文章于 2023-04-19 14:54:47 发布

面对疾风ba

最新推荐文章于 2023-04-19 14:54:47 发布

阅读量668

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/u011608672/article/details/114393005

版权

vue学习笔记专栏收录该内容

36 篇文章 5 订阅

订阅专栏

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 1. 导入 vue-router 组件库 -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <title>Document</title>
</head>
<body>
    <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:[ //路由的嵌套
           {path:'login', component:login},
           {path:'register', component:register}
         ]
        }
      ]
    })
  
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      router:router
    });
    </script>
</body>
</html>