Vue【路由】

最新推荐文章于 2024-07-05 15:05:21 发布

Wyliss

最新推荐文章于 2024-07-05 15:05:21 发布

阅读量109

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/YhWyl527/article/details/105426891

版权

路由

<body>
    <div id="app">
        <div class="container">
            <router-view></router-view>
        </div>
        <ul>
            <!-- tag 属性可以定义router-link转换成的标签 -->
            <router-link tag="li" to='/'>首页</router-link>
            <router-link tag="li" to='/Discover'>发现</router-link>
            <router-link tag="li" to='/Order'>订单</router-link>
            <router-link tag="li" to='/Profile'>我的</router-link>
        </ul>
    </div>
    
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <script>
        var Index= {
            template:`
                <div>首页</div>
            `
        }
        var Discover= {
            template:`
                <div>发现</div>
            `
        }
        var Order= {
            template:`
                <div>订单</div>
            `
        }
        var Profile= {
            template:`
                <div>我的</div>
            `
        }
        // 实例化路由方法
        const router = new VueRouter({
            routes: [//路由是个数组集合 因为每一个页面都要有自己的路由对象
                {
                    path:'/',//需要定义的页面跳转地址,一个 / 表示默认渲染的页面
                    component:Index
                },
                {
                    path:'/Discover',
                    component:Discover
                },
                {
                    path:'/Order',
                    component:Order
                },
                {
                    path:'/Profile',
                    component:Profile
                },

            ]
        })
        var vl = new Vue({
            el:"#app",
            router,
        })
    
    </script>
    
</body>

css样式

<style>
    body,html,#app{
        height: 100%;
        width: 100%;
    }
    ul{
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-around;
        height: 50px;
    }
    li{
        height: 50px;
        line-height: 50px;
    }
    .container{
        height: calc(100% - 50px);
    }
</style>

子路由（ele为例）

<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
    <script>
        var NavPage = {
            template:`
            <div id="NavPage">
                <div class="container">
                    <router-view></router-view>
                </div>
                <ul>
                    <router-link tag="li" to='/index'>首页</router-link>
                    <router-link tag="li" to='/discover'>发现</router-link>
                    <router-link tag="li" to='/order'>订单</router-link>
                    <router-link tag="li" to='/profile'>我的</router-link>
                </ul>
            </div>
            `
        }
        var NoNavPage = {
            template:`
                <div>金币商城</div>
            `
        }
        var Index= {
            template:`
                <div>首页</div>
            `
        }
        var Discover= {
            template:`
                <div>发现</div>
            `
        }
        var Order= {
            template:`
                <div>订单</div>
            `
        }
        var Profile= {
            template:`
                <div>
                    我的
                    <router-link tag="li" to="/icon">金币商城</router-link>
                </div>
                
            `
        }
        // 实例化路由方法
        const router = new VueRouter({
            routes: [//路由是个数组集合 因为每一个页面都要有自己的路由对象
                 {
                    path:'/',
                    component:NavPage,
                    children:[//使用path跳转子路由页面时 需要在子路由的path前拼接父路由的path地址
                    {
                    path:'index',
                    component:Index
                    },
                    {
                    path:'discover',
                    component:Discover
                    },
                    {
                    path:'order',
                    component:Order
                    },
                    {
                    path:'profile',
                    component:Profile
                    },
                    ]
                },
                {
                    path:'/icon',
                    component:NoNavPage
                }
            ]
        })
        var vl = new Vue({
            el:"#app",
            router,
        })
    
    </script>

css样式

<style>
    body,html,#app,#NavPage{
        height: 100%;
        width: 100%;
    }
    ul{
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-around;
        height: 50px;
    }
    li{
        height: 50px;
        line-height: 50px;
    }
    .container{
        height: calc(100% - 50px);
    }
</style>

动态路由

以一个例子来说

<div id="app">
        <div class="container">
            <router-view></router-view>
        </div>
        <ul>
            <!-- tag 属性可以定义router-link转换成的标签 -->
            <router-link tag="li" :to="'/' + '首页'">首页</router-link>
            <router-link tag="li" :to="'/' + '发现'">发现</router-link>
            <router-link tag="li" :to="'/' + '订单'">订单</router-link>
            <router-link tag="li" :to="'/' + '我的'">我的</router-link>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>

 var Index= {
            template:`
                <div>{{$route.params.type}}</div>
            `,
            created() {
                console.log(this.$route.params.type)
            },
        }
 const routes=[
            //动态路由的动态参数其实就是params参数中的键
            //使用路由跳转时拼接进入的变量就是键值对中的值
            {
                path:'/:type',
                component:Index
            }
        ]
        const router = new VueRouter({
            routes
        })