2020/8/05 vue-router

最新推荐文章于 2024-03-22 09:20:42 发布

太想进步了

最新推荐文章于 2024-03-22 09:20:42 发布

阅读量127

点赞数

文章标签： vue-router 路由

本文链接：https://blog.csdn.net/qq_44755188/article/details/107817182

版权

一，基本使用步骤：

注意点：

路由规则数组是routes
挂载到Vue实列种是用router属性
component后面直接写组件对象而不是写字符串形式的
用redirect重定向刚进来的时候地址是根地址，跳转/login 来默认加载登陆组件

<body>
    <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/regist">注册</router-link>
        <router-view></router-view>
    </div>

</body>
<script>
    var login = {
        template: `<h1>登陆组件</h1>`
    }
    var regist = {
        template: `<h1>注册组件</h1>`
    }
    var router = new VueRouter({
        routes: [{
            path: '/login',
            component: login
        }, {
            path: '/regist',
            component: regist
        }, {
            path: '/',
            redirect: '/login'
        }]
    })
    var vm = new Vue({
        el: '#app',
        components: {
            login,
            regist
        },
        router,
    });
</script>

二，路由嵌套：

为了给注册组件继续添加俩个子组件，为了实现下面这种效果就得在上面案列的基础上使用到路由嵌套

<body>
    <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/regist">注册</router-link>
        <!-- <router-view></router-view> -->
        <router-view />
    </div>

</body>
<script>
    var login = {
        template: `<h1>登陆组件</h1>`
    }
    var tab1 = {
        template: `<h3>注册子组件一内容</h3>`
    }
    var tab2 = {
        template: `<h3>注册子组件二内容</h3>`
    }
    var regist = {
        template: `<div>
        <h1>注册组件</h1>
        <hr>
             <div>
                 <router-link to="/regist/tab1">注册子组件一</router-link>&nbsp;&nbsp;&nbsp;
                 <router-link to="/regist/tab2">注册子组件二</router-link>
                 <router-view></router-view>
             </div>
        </div>`
    }
    var router = new VueRouter({
        routes: [{
            path: '/login',
            component: login
        }, {
            path: '/regist',
            component: regist,
            children: [{
                path: '/regist/tab1',
                component: tab1
            }, {
                path: '/regist/tab2',
                component: tab2
            }]

        }, {
            path: '/',
            redirect: '/login'
        }]
    })
    var vm = new Vue({
        el: '#app',
        components: {
            login,
            regist,
            tab1,
            tab2
        },
        router,
    });
</script>

关键点就是在 routes数组里面的regist的路由匹配规则下添加children属性相当于一个小的routes数组

三，传递路由参数：

一，通过$.route.params

返回的是以动态参数 id name 为键值的对象

<body>
    <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/user1/ls">users1</router-link>
        <router-link to="/user2/kk">users2</router-link>
        <router-link to="/user3/zs">users3</router-link>
        <router-view />
    </div>

</body>
<script>
    var login = {
        template: `<h1>登陆组件</h1>`
    }
    var user = {
        template: `<h1>user:------路由参数:{{this.$route.params}}</h1>`
    }
    var router = new VueRouter({
        routes: [{
            path: '/login',
            component: login
        }, {
            path: '/user:id/:name',
            component: user,
        }, {
            path: '/',
            redirect: '/login'
        }]
    })
    var vm = new Vue({
        el: '#app',
        components: {
            login,
            user
        },
        router,
    });
</script>

二，通过props

设置为true, 将$route.params设置为组件的属性

<body>
    <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/user1/ls">users1</router-link>
        <router-link to="/user2/kk">users2</router-link>
        <router-link to="/user3/zs">users3</router-link>
        <router-view />
    </div>

</body>
<script>
    var login = {
        template: `<h1>登陆组件</h1>`
    }
    var user = {
        props: ['id', 'name'],
        template: `<h1>user:------id:{{id}} name:{{name}} 原始获取路由做法：{{this.$route.params}}</h1>`
    }
    var router = new VueRouter({
        routes: [{
            path: '/login',
            component: login,
        }, {
            path: '/user:id/:name',
            component: user,
            props: true
        }, {
            path: '/',
            redirect: '/login'
        }]
    })
    var vm = new Vue({
        el: '#app',
        components: {
            login,
            user
        },
        router,
    });
</script>

三，props对象来传参（固定参数）

通过对象的形式，这时候这种方法拿不到动态的id $route.params.id可以

<body>
    <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/user1/ls">users1</router-link>
        <router-link to="/user2/kk">users2</router-link>
        <router-link to="/user3/zs">users3</router-link>
        <router-view />
    </div>

</body>
<script>
    var login = {
        template: `<h1>登陆组件</h1>`
    }
    var user = {
        props: ['id', 'name', 'age'],
        template: `<h1>user:------id:{{id}} name:{{name}}  age:{{age}}原始获取路由做法：{{this.$route.params}}</h1>`
    }
    var router = new VueRouter({
        routes: [{
            path: '/login',
            component: login,
        }, {
            path: '/user:id/:name',
            component: user,
            // props:true,
            props: {
                age: 12,
                name: "ss" //设置了固定值给user组件使用 这个时候是固定在，拿不到动态的id
            }
        }, {
            path: '/',
            redirect: '/login'
        }]
    })
    var vm = new Vue({
        el: '#app',
        components: {
            login,
            user
        },
        router,
    });
</script>

四，props值为函数的

这样既可以传递静态路由参数，也可以动态

<body>
    <div id="app">
        <router-link to="/login">登陆</router-link>
        <router-link to="/user1/ls">users1</router-link>
        <router-link to="/user2/kk">users2</router-link>
        <router-link to="/user3/zs">users3</router-link>
        <router-view />
    </div>

</body>
<script>
    var login = {
        template: `<h1>登陆组件</h1>`
    }
    var user = {
        props: ['id', 'name', 'age'],
        template: `<h1>user:------id:{{id}} name:{{name}}  age:{{age}}原始获取路由做法：{{this.$route.params}}</h1>`
    }
    var router = new VueRouter({
        routes: [{
            path: '/login',
            component: login,
        }, {
            path: '/user:id/:name',
            component: user,
            // props:true,
            props: route => ({
                id: route.params.id,
                name: route.params.name,
                age: 13
            })
        }, {
            path: '/',
            redirect: '/login'
        }]
    })
    var vm = new Vue({
        el: '#app',
        components: {
            login,
            user
        },
        router,
    });
</script>

太想进步了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2020/8/05 vue-router

一，基本使用步骤：注意点：路由规则数组是routes 挂载到Vue实列种是用router属性 component后面直接写组件对象而不是写字符串形式的用redirect重定向刚进来的时候地址是根地址，跳转/login 来默认加载登陆组件<body> <div id="app"> <router-link to="/login">登陆</router-link> ...
复制链接

扫一扫