2018-09-24 路由

2018-09-25  本文已影响0人  Stysteve丶雷

路由 单页面的自我转换

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="nb">
        <router-link to="/home">首页</router-link>
        <router-link to="/index">尾页</router-link>
        <router-view></router-view>
    </div>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
    <script>
        var jion={
            template:`
            
                <h1>这是首页</h1> 
            
             `
        }
        var jick={
            template:`
                <div>
                <h1>这是尾页</h1>
<ul>
<li>
    <router-link to="/index/jon">自负也</router-link>
    </li>
<li>
    <router-link to="/index/joon">自恋也</router-link>

    </li>
    </ul>
                </div>
            
        `
        }
        const routes=[
            {path:"/home",component:jion},
            {path:"/index",component:jick,
            children:[
                 {path:"jon",component:jion},
            {path:"joon",component:jick,}
            ]},
            

        ]
        const router= new VueRouter({
            routes:routes
        })
        new Vue({
            el:".nb",
            router:router
        })
    </script>
    </body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读