Vue之VueRouter

其他 2018-11-12 23:17:59 阅读次数: 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,
            },
        ]
    });

猜你喜欢

转载自www.cnblogs.com/wjs521/p/9949774.html
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022