vue路由

最新推荐文章于 2022-05-14 19:36:13 发布

瓜皮瓜皮

最新推荐文章于 2022-05-14 19:36:13 发布

阅读量248

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Frost666/article/details/81710653

本文详细介绍了一个使用Vue.js和Vue Router实现的多页面应用案例，包括页面间的导航、嵌套路由及动态组件加载。通过具体代码展示了如何组织和管理复杂的前端路由结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/first">第一页</router-link>
<router-link to="/second">第二页</router-link>
<router-link to="/third">第三页</router-link>
<router-view></router-view>
</div>
<template id="fir">
    <div>
        <h1>第一页</h1>
        <router-link to="/first/aaa">FUZE</router-link>
        <router-link to="/first/bbb">ASH</router-link>
        <router-view></router-view>
    </div>
</template>

<template id="sec">
    <h1>第二页</h1>
</template>

<template id="thi">
    <h1>第三页</h1>
</template>

<template id="aa">
    <h2>人质</h2>
</template>

<template id="bb">
    <h2>RUSH B</h2>
</template>

<script>
    let Aaa=Vue.component("aaa",{
        template:"#aa"
    });
    let Bbb=Vue.component("bbb",{
        template:"#bb"
    });
    let Fir=Vue.component("first",{
        template:"#fir"
    });
    let Sec=Vue.component("second",{
        template:"#sec"
    });
    let Thi=Vue.component("third",{
        template:"#thi"
    });
    let router=new VueRouter({
        routes:[
            {path:"/",redirect:"/first"},
            {path:"/first",component:Fir,
                children:[
                    {path:"/first/aaa",component:Aaa},
                    {path:"/first/bbb",component:Bbb}
                ]},
            {path:"/second",component:Sec},
            {path:"/third",component:Thi},
        ]
    });
    new Vue({
        el:"#app",
        redirect:"/ftist",
        router,


    });

</script>
</body>
</html>