• vue2.0学习笔记之路由(二)路由嵌套


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue2.0学习笔记之路由(二)路由嵌套</title>
    </head>
    <body>
        <div id="app">
            <div>
                <router-link to="/home">主页</router-link>
                <router-link to="/user">用户中心</router-link>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </body>
    </html>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <script>
        // 定义组件
        var Home = {
            template:"<h3>主页内容</h3>"
        }
        var User = {
            template:`
                <div>
                    <h3>用户中心</h3>
                    <ul>
                        <li><router-link to="user/userinfo">查看个人信息</router-link></li>
                    </ul>
                    <div>
                        <router-view></router-view>
                    </div>
                </div>
    
            `
        }
        var UserDetail = {
            template:"<h4>个人信息</h4>"
        }
        // 配置路由
        const routes = [
            { path:"/home", component:Home },
            {
                path:"/user",
                component:User,
                children:[  // 配置子路由
                    { path:"userinfo",component:UserDetail }
                ]
            },
            { path:"*", redirect:"/home" } // 重定向让页面加载即显示Home
        ]
        // 生成路由实例
        const router = new VueRouter({
            routes
        })
        // 挂载到vue实例上
        new Vue({
            el:"#app",
            router
        })
    </script>
  • 相关阅读:
    ixgbe dma 控制器
    per cpu
    HDU 4597 Play Game
    HDU 5115 Dire Wolf
    hdu 5900 QSC and Master
    CodeForces933A A Twisty Movement
    CodeForces 245H Queries for Number of Palindromes
    CodeForces596D Wilbur and Trees
    CodeForces509F Progress Monitoring
    CodeForces149D Coloring Brackets
  • 原文地址:https://www.cnblogs.com/hcxy/p/7118642.html
Copyright © 2020-2023  润新知