vue---路由（一）

最新推荐文章于 2023-06-07 15:03:00 发布

scwMason

最新推荐文章于 2023-06-07 15:03:00 发布

阅读量146

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/scwMason/article/details/89070581

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

基本使用

      <style>
        .router-link-active {
            color: red;
            font-weight: 200;
            font-size: 40;
            font-style: italic;
        }
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(140px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.5s ease;
        }
    </style>
<body>
    <div id="app">
        <router-link to='/login'>登陆</router-link>
        <router-link to='/register' tag="span">注册</router-link><!--tag表示渲染成什么标签-->
        <transition mode="out-in">        <!--mode表示模式，这里是出后进-->
            <router-view></router-view>
        </transition>

    </div>
    <script>
        const login = {
            template: '<h1>登陆</h1>'
        }
        const register = {
            template: '<h1>注册</h1>'
        }
        //路由对象
        var routerObj = new VueRouter({
            routes: [
                { path: '/', redirect: '/login' },//重定向
                { path: '/login', component: login },
                { path: '/register', component: register }
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            router: routerObj//建立路由和vue实例关系
        })
    </script>
</body>

query用法

<router-link to='/login?id=10'>登陆</router-link>

const login = {
            template: '<h1>登陆--{{$route.query.id}}</h1>',
            created(){
                console.log(this.$route.query.id)
            }
        }

$route.query就是获取路由后面的参数

params传递参数

 <router-link to='/login/10/mason'>登陆</router-link>
 var routerObj = new VueRouter({
            routes: [
                { path: '/', redirect: '/login' },//重定向
                { path: '/login/:id/:name', component: login },
                { path: '/register', component: register }
            ]
        })
 const login = {
            template: '<h1>登陆--{{$route.params.id}}--{{$route.params.name}}</h1>',
            created(){
                console.log(this.$route.params.id)
            }
        }

用:id/:name来规定参数，routes里面给参数赋值

children定义子路由

需求：我们希望点击登陆，下面会出现“登陆”，但是这个模板还是基于account，所以account和login、regist是父子路由关系

<body>
    <div id="app">
        <router-link to="/account">Account</router-link>
        <transition mode="out-in">
            <!--mode表示模式，这里是出后进-->
            <router-view></router-view>
        </transition>
    </div>
    <template id="tmp1">
        <div>
            <h1>这是Account</h1>
            <router-link to="/account/login">登陆</router-link>
            <router-link to="/account/register">注册</router-link>
            <router-view></router-view>
        </div>
    </template>
    <script>
        var login = {
            template: '<h1>登陆</h1>',
            created() {
                console.log(this.$route.params.id)
            }
        }
        var register = {
            template: '<h1>注册</h1>'
        }
        var account = {
            template: "#tmp1"
        }
        //路由对象
        var routerObj = new VueRouter({
            routes: [
                {
                    path: '/account',
                    component: account,
                    children: [
                        { path: "login", component: login },
                        { path: "register", component: register }
                    ]
                }
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
            router: routerObj//建立路由和vue实例关系
        })
    </script>
</body>

这样就可以了

实现经典视图

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .head {
            background-color: orange;
        }
        .container{
            display: flex;
            height: 600px;
        }
        .left {
            background-color: aquamarine;
            flex:2;
        }

        .main {
            background-color: blanchedalmond;
            flex: 8;
        }
    </style>

 <div id="app">
        <router-view></router-view>
        <div class="container">
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
        </div>
    </div>
    <script>
        var header = {
            template: '<h1 class="head">Header导航栏</h1>'
        }
        var leftBox = {
            template: '<h1 class="left">Left左侧栏</h1>'
        }
        var rightBox = {
            template: '<h1 class="main">main主要部分</h1>'
        }
        var router = new VueRouter({
            routes: [
                {
                    path: '/',
                    components: {
                        'default': header,
                        'left': leftBox,
                        'main': rightBox
                    }
                }
            ]
        })
        var vm = new Vue({
            el: "#app",
            data: {},
            router: router
        })
    </script>
</body>

注意：这里的重点是name属性分开显示

scwMason

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue---路由（一）

基本使用 <style> .router-link-active { color: red; font-weight: 200; font-size: 40; font-style: italic; } .v-enter, ...
复制链接

扫一扫

专栏目录