码迷，mamicode.com
首页 > 其他好文 > 详细

VueRouter

时间：2020-04-16 22:40:13      阅读：65      评论：0      收藏：0      [点我收藏+]

标签：xxxx   required   mode   his   绑定   静态路由   arc   ted   require   

VueRouter

特点：通过路由和组件实现一个单页面的应用。

路由的注册：静态路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:‘<div><h1>首页组件</h1></div>‘
            }
        },
        {
            path:"/course",
            component:{
                template:‘<div><h1>课程组件</h1></div>‘
            }
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

路由的注册：动态路由（路由的参数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由动态绑定：to -->
    <router-link :to="{name:‘home‘}">首页</router-link>
    <router-link :to="{name:‘course‘}">课程</router-link>
    <!--  带有参数的静态路由绑定  -->
    <router-link to="/user/nepenthe?age=20">用户1</router-link>
    <!--  带有参数的动态路由绑定  -->
    <router-link :to="{name:‘user‘,params:{name:‘forget-me-not‘},query:{age:‘23‘}}">用户2</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            name:"home",
            component:{
                template:‘<div><h1>首页组件</h1></div>‘
            }
        },
        {
            path:"/course",
            name: "course",
            component:{
                template:‘<div><h1>课程组件</h1></div>‘
            }
        },
        {
            path:"/user/:name",
            // 参数设置（？P<name>.*）
            name: "user",
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        // 获取路由name：this.$route.name
                        ‘<h1>{{this.$route.name}}用户组件</h1>‘ +
                        // 获取路由中参数：this.$route.params.name
                        ‘<h1>username:{{this.$route.params.name}}</h1>‘ +
                        // 获取路由中参数（使用？的参数）：this.$route.query.age
                        ‘<h1>age:{{this.$route.query.age}}</h1>‘ +
                    ‘</div>‘,
                // Vue属性加载完成后执行的方法
                mounted(){
                    console.log(this.$route)
                }
            }
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

路由的注册：自定义路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由绑定：to -->
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>首页组件</h1>‘ +
                        ‘<button @click="my_click">点击跳转登录页面</button>‘ +
                    ‘</div>‘,
                methods:{
                    my_click: function(){
                        
                        console.log(this.$route);
                        // $route 当前路由的所有信息
                        console.log(this.$router);
                        // $router VueRouter的实例化对象
                        console.log(this.$el);
                        console.log(this.$data);
                        this.$router.push("/login")
                        // 跳转页面 --> 跳转到登录组件
                    }
                }
            }
        },
        {
            path:"/course",
            component:{
                template:‘<div><h1>课程组件</h1></div>‘
            }
        },
        {
            path:"/login",
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>登录组件</h1>‘ +
                    ‘</div>‘
            }
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

路由的钩子函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由绑定：to -->
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/user">用户</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>首页组件</h1>‘ +
                        ‘<button @click="my_click">点击跳转登录页面</button>‘ +
                    ‘</div>‘,
                methods:{
                    my_click: function(){

                        console.log(this.$route);
                        // $route 当前路由的所有信息
                        console.log(this.$router);
                        // $router VueRouter的实例化对象
                        console.log(this.$el);
                        console.log(this.$data);
                        // 跳转页面 --> 跳转到登录组件
                        this.$router.push("/login")
                    }
                }
            }
        },
        {
            path:"/course",
            component:{
                template:‘<div><h1>课程组件</h1></div>‘
            }
        },
        {
            path:"/login",
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>登录组件</h1>‘ +
                    ‘</div>‘
            }
        },
        {
            path:"/user",
            meta:{
                required_login: true
            },
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>用户组件</h1>‘ +
                    ‘</div>‘
            }
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url,
        mode:‘history‘ // 清除路径
    });
    router.beforeEach(function (to, from, next) {
        console.log(to); // 跳转到哪里
        console.log(from); // 从哪来
        console.log(next); // 下一步做什么
        // 直接路径判断
        // if(to.path == "/user"){
        //     next("/login");
        // }
        // 使用meta判断（配置方便）
        if(to.meta.required_login){
            next("login");
        }
        next();
    });
    // router.afterEarch(function(to, from){
        // 智能识别路由要去哪和从哪来，一般用于获取路由从哪来
    // });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

子路由的注册：静态路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由绑定：to -->
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/course/detail">课程详情</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>首页组件</h1>‘ +
                    ‘</div>‘
            }
        },
        {
            path:"/course",
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>课程组件</h1>‘ +
                    ‘</div>‘
            }
        },
        {
            path:"/course/detail",
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>课程详情组件</h1>‘ +
                        ‘<hr>‘ +
                        ‘<router-link to="/course/brief">课程概述</router-link> ‘ +
                        ‘ <router-link to="/course/chapter">课程章节</router-link>‘ +
                        ‘<router-view></router-view>‘ +
                    ‘</div>‘
            },
            children:[
                {
                    path:"/course/brief",
                    component:{
                        template:‘‘ +
                            ‘<div>‘ +
                                ‘<h1>课程概述组件</h1>‘ +
                            ‘</div>‘
                    }
                },{
                    path:"/course/chapter",
                    component:{
                        template:‘‘ +
                            ‘<div>‘ +
                                ‘<h1>课程章节组件</h1>‘ +
                            ‘</div>‘
                    }
                },
            ]
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

子路由的注册：动态路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由绑定：to -->
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/course/detail">课程详情</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>首页组件</h1>‘ +
                    ‘</div>‘
            }
        },
        {
            path:"/course",
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>课程组件</h1>‘ +
                    ‘</div>‘
            }
        },
        {
            path:"/course/detail",
            redirect:{name:‘brief‘}, // 重定向子路由，实现默认页面显示
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>课程详情组件</h1>‘ +
                        ‘<hr>‘ +
                        ‘<router-link :to="{name:\‘brief\‘}">课程概述</router-link> ‘ +
                        ‘<router-link to="/course/chapter">课程章节</router-link>‘ +
                        ‘<router-view></router-view>‘ +
                    ‘</div>‘
            },
            children:[
                {
                    path:"brief",
                    name:"brief",
                    component:{
                        template:‘‘ +
                            ‘<div>‘ +
                                ‘<h1>课程概述组件</h1>‘ +
                            ‘</div>‘
                    }
                },{
                    path:"/course/chapter",
                    name:"chapter",
                    component:{
                        template:‘‘ +
                            ‘<div>‘ +
                                ‘<h1>课程章节组件</h1>‘ +
                            ‘</div>‘
                    }
                },
            ]
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

命名的路由视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由绑定：to -->
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/user">用户</router-link>
    <router-view name="head"></router-view>
    <router-view name="footer"></router-view>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>首页组件</h1>‘ +
                    ‘</div>‘,
            }
        },
        {
            path:"/course",
            component:{
                template:‘<div><h1>课程组件</h1></div>‘
            }
        },
        {
            path:"/user",
            components:{
                head:{
                    template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>用户head</h1>‘ +
                    ‘</div>‘
                },
                footer:{
                    template:‘‘ +
                    ‘<div>‘ +
                        ‘<h1>用户footer</h1>‘ +
                    ‘</div>‘
                }
            }
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url,
        mode:‘history‘ // 清除路径
    });
    router.beforeEach(function (to, from, next) {
        next();
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

Vue的路由：

注册：
-- 定义一个匹配规则对象
let url = [
{
path:"/",
component:{}

? }
? ]
? -- 实例化VueRouter对象 并把匹配规则注册进去
? let router = new VueRouter({
? routes:url
? })
? -- 把VueRouter实例化对象注册到Vue的根实例
? const app = new Vue({
? el:""
? })
? -- router-link
? -- router-view

子路由的注册
-- 在父路由里注册children：[{},{}]
-- 在父路由对应的组件里的template里写 router-link router-view

路由的名命
-- name
-- 注意 to 一定动态绑定 ：to=" {name:‘ ‘} "

路由的参数
this.$route.params.xxxx
this.$route.query.xxxx

自定义路由
this.$router.push("/course")
this.$router.push({name:‘ ‘, params:{ },query:{}})

路由的钩子函数
router.beforeEach(function(to, from, next){
to 路由去哪
from 路由从哪来
next 路由接下来要做什么
}) # 一般用于拦截
router.afterEach(function(to, from){
}) # 一般用于获取

注意
$route 路由的所有信息组成的对象
$router VueRouter 实例化对象
redirect 路由的重定向

VueRouter

标签：xxxx   required   mode   his   绑定   静态路由   arc   ted   require   

原文地址：https://www.cnblogs.com/wylshkjj/p/12716106.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！