Vue.js路由router

2021-09-04 09:12:44

一、Vue.js简介

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
Vue.js 路由需要载入 vue-router 库

二、Vue.js的CDN

https://unpkg.com/vue-router/dist/vue-router.js

三、简单的router示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h1>欢迎来到我的网站</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">首页</router-link>
        <router-link to="/bar">个人中心</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<script>
    // 0. 如果使用模块化机制编程，导入 Vue 和 VueRouter，要调用 Vue.use(VueRouter)
    // 1. 定义（路由）组件。
    // 可以从其他文件 import 进来
    const Foo = {template: '<div>首页内容</div>'};
    const Bar = {template: '<div>个人中心设置</div>'};

    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器，
    // 或者，只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
        {path: '/foo', component: Foo},
        {path: '/bar', component: Bar}
    ];

    // 3. 创建 router 实例，然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
        routes:routes // （可以缩写成routes）
    });

    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    
    //写法一
    // const app = new Vue({
    //     router
    // }).$mount('#app')
    
    //写法二
    const app = new Vue({
        el:"#app",//绑定域
        router:router,//注册router
    })
</script>
</body>
</html>

注册router、创建router实例、定义routes、router-link标签、router-view标签五部曲

四、命名的路由以及路由视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <h1>欢迎来到我的网站</h1>
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link :to="{name:'home'}">首页</router-link>
        <router-link :to="{name:'center'}">个人中心</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<script>
    //定义组件、路由
    const routes = [
        {
            path: '/foo',
            name :'home',
            component:{
                template: '<div>首页内容</div>'
            }},
        {
            path: '/bar',
            name:'center',
            component:{
                template: '<div>个人中心设置</div>'
            }}
    ];

    //  创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes:routes // （可以缩写成routes）
    });

    // 4. 创建和挂载根实例。记得要通过 router 配置参数注入路由，
    const app = new Vue({
        el:"#app",//绑定域
        router:router,//注册router
    })
</script>
</body>
</html>

命名路由是在定义路由时加上name属性，然后给router-link标签上的to属性绑定属性，格式是:to='{name:'XXX'}'。
路由命名的好处就是无论path改成什么，只要是name不变，链接就依旧生效。

五、路由的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/home">调转到首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <!--<router-link to="/user/alex?age=48">用户管理</router-link>-->
    <router-link :to="{name: 'userinfo', params: {name: 'alex'}, query: {age: 48}}">用户管理</router-link>

    <div>
        <router-view></router-view>
    </div>
</div>

<script>
    let routes = [
        {
            path: "/",
            component: {
                template: `<div><h1>这是首页</h1></div>`
            }
        },
        {
            path: "/home",
            redirect: "/",
        },
        {
            path: "/about",
            component: {
                template: `<div><h1>关于我们</h1></div>`
            }
        },
        {
            path: "/user/:name",
            name: "userinfo",
            component: {
                template: `<div><h1>{{username}}的年龄是{{age}}</h1></div>`,
                data(){
                    return {
                        username: this.$route.params.name,
                        age: this.$route.query.age,
                    }
                },
                mounted(){
                    console.log(this.$route)
                }
            }
        }
    ];
    let router = new VueRouter({
        routes: routes
    });

    const app = new Vue({
        el: "#app",
        router: router,
    })
</script>
</body>
</html>

六、子路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <router-link to="/user">用户管理</router-link>
    <div>
        <router-view></router-view>
    </div>
</div>
<script>
    let routes = [
        {
            path: "/",
            component: {
                template: `<div><h1>这是首页</h1></div>`
            }
        },
        {
            path: "/about",
            component: {
                template: `<div><h1>关于我们</h1></div>`
            }
        },
        {
            path: "/user",
            component: {
                template: `<div>
                            <h1>用户管理</h1>
                            <router-link to="more" append>用户详情</router-link>
                            <router-view></router-view>
                            </div>`,
            },
            children: [
                {
                    path: "more",
                    component: {
                        template: `<div><h1>用户详细信息</h1></div>`,
                    }
                }
            ]
        }
    ];
    let router = new VueRouter({
        routes: routes
    });

    const app = new Vue({
        el: "#app",
        router: router,
    })
</script>
</body>
</html>

七、手动更新路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于我们</router-link>
    <router-link to="/user">用户管理</router-link>
    <button @click="on_click">点我调转到关于我们</button>

    <div>
        <router-view></router-view>
    </div>
</div>
<script>
    let routes = [
        {
            path: "/",
            component: {
                template: `<div><h1>这是首页</h1></div>`
            }
        },
        {
            path: "/about",
            name: "about",
            component: {
                template: `<div><h1>关于我们</h1></div>`
            }
        },
        {
            path: "/user",
            component: {
                template: `<div><h1>用户管理</h1></div>`
            }
        }
    ];
    let router = new VueRouter({
        routes: routes
    });
    
    const app = new Vue({
        el: "#app",
        router: router,
        methods: {
            on_click: function() {
                this.$router.push({name: 'about'})
            }
        },
        mounted(){
            console.log(this.$route);
            console.log(this.$router)
        }
    })
</script>
</body>
</html>

八、路由的钩子

就是：meta: { required_login: true},在需要登录才能访问的path中加入钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/login">登陆</router-link>
    <router-link to="/user">用户管理</router-link>
    <router-link to="/vip">vip管理</router-link>
    <div>
        <router-view></router-view>
    </div>
</div>
<script>
    let routes = [
        {
            path: "/",
            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>
                            <router-link :to="{name: 'more'}">用户详细信息</router-link>
                            <router-link :to="{name: 'mores'}" >用户更多详细信息</router-link>
                            <router-view></router-view>
                        </div>`
            },
            children: [
                {
                    path: "more",
                    name: 'more',
                    meta: {
                        required_login: true
                    },
                    component: {
                        template: `<div><h1>用户详细信息</h1></div>`,
                    }
                },
                {
                    path: "more_more",
                    name: "mores",
                    meta: {
                            required_login: true
                    },
                    component: {
                        template: `<div><h1>用户更多详细信息</h1></div>`,
                    }
                }
            ]
        },
        {
            path: "/vip",
            meta: {
                required_login: true
            },
            component: {
                template: `<div><h1>vip管理</h1></div>`
            }
        }
    ];
    let router = new VueRouter({
        routes: routes
    });
    router.beforeEach(function (to, from, next) {
        console.log(to);
        console.log(from);
        console.log(next);
        if(to.meta.required_login){
            next("/login")
        }else {
            next()
        }
    });
    router.afterEach(function (to, from) {
        console.log(to);
        console.log(from)
    });
    const app = new Vue({
        el: "#app",
        router: router,
    })
</script>
</body>
</html>

九、子路由的匹配以及元信息的配置

路由的生命周期就是从一个路由跳转到另一路由整个过程，下面介绍两个钩子。

router.beforeEach() router.afterEach() 详情请看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/login">登陆</router-link>
    <router-link to="/user">用户管理</router-link>
    <router-link to="/vip">vip管理</router-link>

    <div>
        <router-view></router-view>
    </div>
</div>

<script>
    let routes = [
        {
            path: "/",
            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>
                            <router-link :to="{name: 'more'}">用户详细信息</router-link>
                            <router-link :to="{name: 'mores'}" >用户更多详细信息</router-link>
                            <router-view></router-view>
                        </div>`
            },
            children: [
                {
                    path: "more",
                    name: 'more',
                    meta: {
                        required_login: true
                    },
                    component: {
                        template: `<div><h1>用户详细信息</h1></div>`,
                    }
                },
                {
                    path: "more_more",
                    name: "mores",
                    meta: {
                            required_login: true
                    },
                    component: {
                        template: `<div><h1>用户更多详细信息</h1></div>`,
                    }
                }
            ]
        },
        {
            path: "/vip",
            meta: {
                required_login: true
            },
            component: {
                template: `<div><h1>vip管理</h1></div>`
            }
        }
    ];
    let router = new VueRouter({
        routes: routes
    });
    router.beforeEach(function (to, from, next) {
        console.log(to);//到哪去
        console.log(from);//从哪来
        console.log(next);//下一步的计划

        if(to.meta.required_login){
            next("/login")
        }else {
            next()
        }
    });
    router.afterEach(function (to, from) {
        console.log(to);
        console.log(from)
    });

    const app = new Vue({
        el: "#app",
        router: router,
    })
</script>
</body>
</html>

码农公寓

一、Vue.js简介

二、Vue.js的CDN

三、简单的router示例：

四、命名的路由以及路由视图

五、路由的参数

六、子路由

七、手动更新路由

八、路由的钩子

九、子路由的匹配以及元信息的配置

相关文章