美文网首页
路由的嵌套实例:

路由的嵌套实例:

作者: 天赐很棒 | 来源:发表于2018-09-25 14:46 被阅读0次
                <!DOCTYPE html>
                 <html lang="en">
                <head>
                          <meta charset="UTF-8">
                          <title>Document</title>
                 </head>
                  <body>
                           <div id='app'>
                           <router-link to='/home'>首页</router-link>
                          <router-link to='/user'>用户页</router-link>
                             <router-view></router-view>
                           </div>
                <script src='js/vue.js'></script>
    <script src='js/vue-router.js'></script>
    <script>
        //2.创建组件
        var Home={
            template:`
              <h1>这是首页</h1>
            `
        }
        
        var User={
            template:`
             <div>
                <h1>这是用户页</h1>
                <ul>
                   <li>
                      <router-link to='/user/regist'>注册</router-link>
                   </li>
                    <li>
                      <router-link to='/user/login'>登录</router-link>
                   </li>
                </ul>
                <router-view></router-view>
            </div>
           `
        }
        
        var Regist={
            template:`
              <h3>这是注册页</h3>
            `
        }
         var Login={
            template:`
              <h3>这是登录页</h3>
            `
        }
        
        //3.配置路由
        const routes=[
            {path:'/',component:Home},
            {path:'/home',component:Home},
            {
                path:'/user',
                component:User,
                children:[
                    {path:'regist',component:Regist},
                    {path:'login',component:Login}
                ]
            }
        ]
        
        //4.创建路由实例
        const router=new VueRouter({
            routes:routes
        })
        //5.
       new Vue({
           el:'#app',
           router:router//注册路由
       })
    </script>
           </body>
           </html>
    
    无标题.jpg

    相关文章

      网友评论

          本文标题:路由的嵌套实例:

          本文链接:https://www.haomeiwen.com/subject/lfhloftx.html