路由的嵌套实例:

2018-09-25  本文已影响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
上一篇下一篇

猜你喜欢

热点阅读