zoukankan      html  css  js  c++  java
  • 关于vue路由嵌套遇到的坑~

    关键在于子路由中的path问题,path之前不要放/

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Title</title>
    	<script src="lib/vue-2.4.0.js"></script>
    	<script src="lib/vue-router.js"></script>
    
    </head>
    <body>
    <div id="app">
    	<router-link to="/login">登录</router-link>
    	<router-view></router-view>
    </div>
    <template id="temp">
    	<div>
    		<h1>只是登录组件</h1>
    		<router-link to="/login/male">男注册</router-link>
    		<router-link to="/login/female">女注册</router-link>
    		<router-view></router-view>
    	</div>
    </template>
    <script>
        let login = {
            template: '#temp',
            data() {
                return {
                    msg: '123'
                }
            }
        };
    
        let malereg = {
            template: `<h2>这是男人注册的组件</h2>`
        };
        let femalereg = {
            template: `<h2>这是nv人注册的组件</h2>`
        };
        let register = {
            template: `<h1>这是一个注册组件</h1>`,
            data() {
                return {
                    msg: '123'
                }
            }
        };
        let router = new VueRouter({
            routes: [
                {
                    path: '/login',
                    component: login,
                    children: [
                        {path: 'male', component: malereg},     // 这个path后面千万不要放 /
                        {path: 'female', component: femalereg}, 
    
                    ]
                },
            ]
        });
        let vm = new Vue({
            el: '#app',
            data: {},
            methods: {},
            router
        })
    </script>
    </body>
    </html>
    
    • 这篇文章写的有点随意,晚上少吃个鸡腿
  • 相关阅读:
    [HNOI 2003] 消防局的设立
    Codeforces 341
    CF 专栏
    TC SRM 570
    TC SRM 588
    TC SRM 589
    TC专栏
    BZOJ 第二十一页 除草
    BZOJ 第二十二页 除草
    BZOJ 第二十三页 除草
  • 原文地址:https://www.cnblogs.com/wenqiangit/p/9798106.html
Copyright © 2011-2022 走看看