Vue之VueRouter

时间：2018-11-13 01:37:12 阅读：110 评论：0 收藏：0 [点我收藏+]

Vue之VueRouter实现原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>
<script>
    let oDiv = document.getElementById(‘app‘);

    window.onhashchange = function () { # onhashchange事件，只需要修改hash值即可响应onhashchange事件中的函数（适用于上一题下一题和跳转页面等功能）
        switch (location.hash) {
            case ‘#/login‘:
                oDiv.innerHTML = `<h1>这是登录页面</h1>`;
                break;
            case ‘#/register‘:
                oDiv.innerHTML = `<h1>这是注册页面</h1>`;
                break;
            default:
                oDiv.innerHTML = `<h1>这是首页</h1>`;
                break;
        }
    }
</script>
</body>
</html>

Vue之VueRouter安装使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="static/vue.min.js"></script>
    <script src="static/vue-router.js"></script>
</head>
<body>
    <div id="app">

    </div>
<script>
    // 1.在Vue根实例中使用，VueRouter
    Vue.use(VueRouter);

    let Home = {
        template: `
            <div>
                <h1>这是主页页面</h1>
            </div>
        `,
    };

    let Login = {
        template: `
            <div>
                <h1>这是登录页面</h1>
            </div>
        `,
    };

    let Register = {
        template: `
            <div>
                <h1>这是注册页面</h1>
        </div>
        `,
    };

    let App = {
        // 4.第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
        // 5.第五步，router-view是页面内容的渲染出口
        template: `
            <div>
                <router-link to="/">首页</router-link>
                <router-link to="/login">登录</router-link>
                <router-link to="/register">注册</router-link>

                <router-view></router-view>
            </div>
        `,
    };

    // 2.第二步实例化一个VueRouter对象
    // 本质上是将路径和页面内容绑定了对应关系
    let router = new VueRouter({
        routes: [
            {
                path: ‘/‘,
                // 注册Home
                component: Home,
            },
            {
                path: ‘/login‘,
                component: Login,
            },
            {
                path: ‘/register‘,
                component: Register,
            },
        ],
    });

    new Vue({
        el: ‘#app‘,
        template: `<App/>`,
        // 3.第三步，在根实例中注册router对象
        router: router,
        components: {
            App,
        }
    });
</script>
</body>
</html>

Vue之VueRouter命名路由

let App = {
        // 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
        // 第五步，router-link是页面内容的渲染出口
        template: `
            // 注意这里需要绑定
            <div>
                <router-link :to="{ name: ‘home‘ }">首页</router-link>
                <router-link :to="{ name: ‘login‘ }">登录</router-link>
                <router-link :to="{ name: ‘register‘ }">注册</router-link>

                <router-view></router-view>
            </div>
        `,
    };

let router = new VueRouter({
        routes: [
            {
                name: ‘home‘,  // 新增的
                path: ‘/‘,
                component: Home,
            },
            {
                name: ‘login‘,
                path: ‘/login‘,
                component: Login,
            },
            {
                name: ‘register‘,
                path: ‘/register‘,
                component: Register,
            },
        ]
    });

// 其他的和上一个安装使用一样

Vue之VueRouter路由参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="static/vue.min.js"></script>
    <script src="static/vue-router.js"></script>
</head>
<body>
<div id="app">

</div>
<script>
    // 在真实的场景中，可有以下路径形式
    // user/1;
    // user/userId: 1;
    // 1.在Vue根实例中使用，VueRouter
    Vue.use(VueRouter);

    let Home = {
        template: `
            <div>
                <h1>这是主页页面</h1>
            </div>
           `,
    };

    let userParams = {
        template: `
            <div>
                <h1>这是用户一的信息</h1>
            </div>
           `,
    };

    let userQuery = {
        template: `
            <div>
                <h1>这是用户二的信息</h1>
            </div>
        `,
    };

    let App = {
        // 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
        // 第五步，router-link是页面内容的渲染出口
        template: `
            // 注意这里需要绑定
            <div>
                <router-link :to="{ name: ‘home‘ }">首页</router-link>
                <router-link :to="{ name: ‘userParams‘, params: { userId: 1 } }">登录</router-link>
                <router-link :to="{ name: ‘userQuery‘, query: { userId: 2 } }">注册</router-link>

                <router-view></router-view>
            </div>
        `,
    };

    let router = new VueRouter({
        routes: [
            {
                name: ‘home‘,
                path: ‘/‘,
                component: Home,
            },
            {
                // xxx/1 这是路径显示
                name: ‘userParams‘,
                path: ‘/user/:userId‘,
                component: userParams,
            },
            {
                // xxx/?userId=1 这是路径显示
                name: ‘userQuery‘,
                path: ‘/user‘,
                component: userQuery,
            },
        ]
    });

    new Vue({
        el: ‘#app‘,
        // 第三步，在根实例中注册router对象,
        template: `<App/>`,
        router: router,
        components: {
            App,
        }
    })
</script>
</body>
</html>

技术分享图片

Vue之VueRouter子路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="static/vue.min.js"></script>
    <script src="static/vue-router.js"></script>
</head>
<body>
<div id="app">

</div>
<script>
    // 在真实的场景中，可有以下路径形式
    // user/1;
    // user/userId: 1;
    // 1.在Vue根实例中使用，VueRouter
    Vue.use(VueRouter);

    let Home = {
        template: `
            <div>
                <h1>这是主页页面</h1>
            </div>
           `,
    };

    let Courses = {
        template: `
            <div>
                <h1>这是课程页面</h1>
                <router-link to="lightcourses">轻课</router-link>
                <router-link to="degreecourses">学位课</router-link>

                <router-view></router-view>
            </div>
           `,
    };

    let LightCourses = {
        template: `
            <div>
                <h1>这是轻课页面</h1>
            </div>
        `,
    };

    let DegreeCourses = {
        template: `
            <div>
                <h1>这是学位课程页面</h1>
            </div>
        `,
    };

    let App = {
        // 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
        // 第五步，router-link是页面内容的渲染出口
        template: `
            // 注意这里需要绑定
            <div>
                <router-link :to="{ name: ‘home‘ }">首页</router-link>
                <router-link :to="{ name: ‘courses‘ }">课程页面</router-link>

                <router-view></router-view>
            </div>
        `,
    };

    let router = new VueRouter({
        routes: [
            {
                name: ‘home‘,
                path: ‘/‘,
                component: Home,
            },
            {
                // xxx/1 这是路径显示
                name: ‘courses‘,
                path: ‘/courses‘,
                component: Courses,
                children: [
                    {
                        path: ‘lightcourses‘,
                        component: LightCourses,
                    },
                    {
                        path: ‘degreecourses‘,
                        component: DegreeCourses,
                    }
                ]
            },
        ]
    });

    new Vue({
        el: ‘#app‘,
        // 第三步，在根实例中注册router对象,
        template: `<App/>`,
        router: router,
        components: {
            App,
        }
    })
</script>
</body>
</html>

技术分享图片

Vue之VueRouter子路由append版

 <router-link to="lightcourses" append >轻课</router-link> // 加append

技术分享图片

Vue之VueRouter子路由append升级版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="static/vue.min.js"></script>
    <script src="static/vue-router.js"></script>
</head>
<body>
<div id="app">

</div>
<script>
    // 在真实的场景中，可有以下路径形式
    // user/1;
    // user/userId: 1;
    // 1.在Vue根实例中使用，VueRouter
    Vue.use(VueRouter);

    let Home = {
        template: `
            <div>
                <h1>这是主页页面</h1>
            </div>
           `,
    };

    let Courses = {
        template: `
            <div>
                <h1>这是课程页面</h1>
                <router-link :to="{ name: ‘lightcourses‘  }">轻课</router-link>
                <router-link :to="{ name: ‘degreecourses‘ }">学位课</router-link>

                <router-view></router-view>
            </div>
           `,
    };

    let LightCourses = {
        template: `
            <div>
                <h1>这是轻课页面</h1>
            </div>
        `,
    };

    let DegreeCourses = {
        template: `
            <div>
                <h1>这是学位课程页面</h1>
            </div>
        `,
    };

    let App = {
        // 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
        // 第五步，router-link是页面内容的渲染出口
        template: `
            // 注意这里需要绑定
            <div>
                <router-link :to="{ name: ‘home‘ }">首页</router-link>
                <router-link :to="{ name: ‘courses‘ }">课程页面</router-link>

                <router-view></router-view>
            </div>
        `,
    };

    let router = new VueRouter({
        routes: [
            {
                name: ‘home‘,
                path: ‘/‘,
                component: Home,
            },
            {
                // xxx/1 这是路径显示
                name: ‘courses‘,
                path: ‘/courses‘,
                component: Courses,
                children: [
                    {
                        name: ‘lightcourses‘,
                        path: ‘lightcourses‘,
                        component: LightCourses,
                    },
                    {
                        name: ‘degreecourses‘,
                        path: ‘degreecourses‘,
                        component: DegreeCourses,
                    }
                ]
            },
        ]
    });

    new Vue({
        el: ‘#app‘,
        // 第三步，在根实例中注册router对象,
        template: `<App/>`,
        router: router,
        components: {
            App,
        }
    })
</script>
</body>
</html>

技术分享图片

Vue之VueRouter子路由重定向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="static/vue.min.js"></script>
    <script src="static/vue-router.js"></script>
</head>
<body>
<div id="app">

</div>
<script>
    // 在真实的场景中，可有以下路径形式
    // user/1;
    // user/userId: 1;
    // 1.在Vue根实例中使用，VueRouter
    Vue.use(VueRouter);

    let Home = {
        template: `
            <div>
                <h1>这是主页页面</h1>
            </div>
           `,
    };

    let Login = {
        template: `
            <div>
                <h1>这是登录页面</h1>
            </div>
           `,
    };

    let Pay = {
        template: `
            <div>
                <h1>这是支付页面</h1>
            </div>
           `,
    };


    let App = {
        // 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
        // 第五步，router-link是页面内容的渲染出口
        template: `
            // 注意这里需要绑定
            <div>
                <router-link :to="{ name: ‘home‘ }">首页</router-link>
                <router-link :to="{ name: ‘login‘ }">登录</router-link>
                <router-link :to="{ name: ‘pay‘ }">支付</router-link>

                <router-view></router-view>
            </div>
        `,
    };

    let router = new VueRouter({
        routes: [
            {
                name: ‘home‘,
                path: ‘/‘,
                component: Home,
            },
            {
                // xxx/1 这是路径显示
                name: ‘login‘,
                path: ‘/login‘,
                component: Login,
            },
            {
                // xxx/1 这是路径显示
                name: ‘pay‘,
                path: ‘/pay‘,
                redirect: ‘/login‘,  // 重定向点击支付还是跳转登录页面
                component: Pay,
            },
        ]
    });

    new Vue({
        el: ‘#app‘,
        // 第三步，在根实例中注册router对象,
        template: `<App/>`,
        router: router,
        components: {
            App,
        }
    })
</script>
</body>
</html>

Vue之VueRouter子路由的钩子函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="static/vue.min.js"></script>
    <script src="static/vue-router.js"></script>
</head>
<body>
<div id="app">

</div>
<script>
    // 在真实的场景中，可有以下路径形式
    // user/1;
    // user/userId: 1;
    // 1.在Vue根实例中使用，VueRouter
    Vue.use(VueRouter);

    let Home = {
        template: `
            <div>
                <h1>这是主页页面</h1>
            </div>
           `,
    };

    let Login = {
        template: `
            <div>
                <h1>这是登录页面</h1>
            </div>
           `,
    };

    let Pay = {
        template: `
            <div>
                <h1>这是支付页面</h1>
            </div>
           `,
    };


    let App = {
        // 第四步，router-link会渲染成a标签，to会变成href属性，to后面是router中定义的路径
        // 第五步，router-link是页面内容的渲染出口
        template: `
            // 注意这里需要绑定
            <div>
                <router-link :to="{ name: ‘home‘ }">首页</router-link>
                <router-link :to="{ name: ‘login‘ }">登录</router-link>
                <router-link :to="{ name: ‘pay‘ }">支付</router-link>

                <router-view></router-view>
            </div>
        `,
    };

    let router = new VueRouter({
        routes: [
            {
                name: ‘home‘,
                path: ‘/‘,
                component: Home,
            },
            {
                // xxx/1 这是路径显示
                name: ‘login‘,
                path: ‘/login‘,
                component: Login,
            },
            {
                // xxx/1 这是路径显示
                name: ‘pay‘,
                path: ‘/pay‘,
                meta: { required_login: true },
                component: Pay,
            },
        ]
    });
    
     // 通过router对象的beforeEach（function（to，from，next））
        router .beforeEach(function (to, from, next) {
            if (to.meta.required_login){
                next(‘/login‘);
            }else{
                next();
            }
        });

    new Vue({
        el: ‘#app‘,
        // 第三步，在根实例中注册router对象,
        template: `<App/>`,
        router: router,
        components: {
            App,
        }
    })
</script>
</body>
</html>

Vue之VueRouter子路由去掉井号

let router = new VueRouter({
        mode: ‘history‘,   // 新加的去掉井号的内容
        routes: [
            {
                name: ‘home‘,
                path: ‘/‘,
                component: Home,
            },
            {
                // xxx/1 这是路径显示
                name: ‘login‘,
                path: ‘/login‘,
                component: Login,
            },
            {
                // xxx/1 这是路径显示
                name: ‘pay‘,
                path: ‘/pay‘,
                meta: { required_login: true },
                component: Pay,
            },
        ]
    });

Vue之VueRouter

原文：https://www.cnblogs.com/wjs521/p/9949774.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)