VueRouter

Posted 2021-02-28 wylshkjj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VueRouter相关的知识，希望对你有一定的参考价值。

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的路由：

? }
? ]
? -- 实例化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的主要内容，如果未能解决你的问题，请参考以下文章

VueRouter：未调用子组件

webpack+vue+vueRouter模块化构建小demo实例超详细步骤（附截图代码入门篇）

route和router 当前与全局路由

Vue之利用vueRouter的元信息实现页面的缓存

Vue 2 + VueRouter 2 + Laravel 5.3 - Webpack（运行时 x 独立构建问题）

vuerouter.query如何获取含有特殊字符的参数