Vue-Router 嵌套路由

最新推荐文章于 2024-06-20 15:58:49 发布

阿娇77

最新推荐文章于 2024-06-20 15:58:49 发布

阅读量256

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/wazj733/article/details/130623127

版权

1：嵌套路由功能

点击父级路由链接，显示模板内容

模板内容当中又有子级路由

点击子级路由链接，显示子级模板内容

2.父级路由组件模板

父级路由链接

父级路由填充位

 <div id="app">
    <!-- 2:vue-router 链接 --> 
    <router-link to="/hh">花花</router-link>
    <!-- 3:router占位符,显示组件的区域 -->
    <router-view></router-view>
</div>

3：子级路由模板

子级路由链接
子级路由填充位

 const hh={
            template:`
            <div>
                <h1>this is 花花</h1>
                <router-link to="/hhMethods">特点</router-link>
                <hr/>
                <router-view></router-view>
            </div>
            `
         }

子级组件

  const hhMethods={
            template:`
            <div>
                <h3 style="color:#fff;background:#339">花花的特点是短胖圆，炸毛</h3>
            </div>
            `
         }

通过children配置子级路由

  const router = new VueRouter({
            routes:[
                {
                    path:'/hh',component:hh,
                    // 通过children配置子级路由
                    children:[
                     {path:'/hhMethods',component:hhMethods}
                    ]
                },
            ]
            
        })

总代码


<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>

        <!-- 1：引入插件  -->
        <script src="./vue-2.6.12.js"></script>
        <script src="./vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 2:vue-router 链接 --> 
            <router-link to="/hh">花花</router-link>
           <!-- 3:router占位符,显示组件的区域 -->
           <router-view></router-view>
        </div>
        
    </body>
   
    <script>
        // 4:定义组件
         const hh={
            template:`
            <div>
                <h1>this is 花花</h1>
                <router-link to="/hhMethods">特点</router-link>
                <hr/>
                <router-view></router-view>
            </div>
            `
         }

         const hhMethods={
            template:`
            <div>
                <h3 style="color:#fff;background:#339">花花的特点是短胖圆，炸毛</h3>
            </div>
            `
         }
         

        //  5：定义路由规则
        const router = new VueRouter({
            routes:[
                {
                    path:'/hh',component:hh,
                    // 通过children配置子级路由
                    children:[
                     {path:'/hhMethods',component:hhMethods}
                    ]
                },
            ]
            
        })

        var vm=new Vue({
            el:'#app',
            // 6.为了让路由规则在项目中可以使用，需要挂在到vue实例化当中
            router:router,
            data:{},
            methods:{},
        })

       
    </script>
    
</html>