AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue.js路由router

2018-08-28 1218
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一、Vue.js简介Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

一、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>
文章标签：
CDN
JavaScript
Web App开发
关键词：
JavaScript路由
VUE.js路由
JavaScript router
VUE.js router
JavaScript路由router
slashboywang
目录
相关文章
心疼你的一切
|
2月前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器，用于实现单页面应用（SPA）的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系，Vue Router 将用户访问的路径与对应的组件关联，支持哈希和历史模式监听 URL 变化，确保页面导航时正确渲染组件。
心疼你的一切
76 9
心疼你的一切
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库，用于构建单页面应用（SPA）。它将不同页面映射到对应组件，支持嵌套路由、路由参数和导航守卫等功能，简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载，提升性能和开发效率。安装命令：`npm install vue-router`。
心疼你的一切
63 1
白雾茫茫丶
|
4月前
|
前端开发 API 开发者
Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion，一个为React设计的动画库，提供了声明式API处理动画和页面转换，适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题，并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后，文章总结了这些效果，并邀请读者探讨更好的实现方案。
白雾茫茫丶
109 7
土木林森
|
5月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式（Hash路由和History路由）、优点及挑战，并通过实际案例分析，帮助开发者更好地理解和应用这一关键技术，提升用户体验。
土木林森
192 1
东方睿赢
|
6月前
|
资源调度 JavaScript 前端开发
路由管理：Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理：Vue Router的使用和配置技巧
东方睿赢
139 3
CamilleKing
|
6月前
|
缓存 JavaScript 搜索推荐
Vue Router 导航钩子的使用场景
【10月更文挑战第13天】
CamilleKing
57 1
mao29955
|
6月前
|
JavaScript 搜索推荐 数据处理
Vue Router 导航钩子
【10月更文挑战第17天】需要注意的是，过度使用导航钩子可能会导致代码复杂度增加，因此需要合理规划和使用。此外，不同的钩子在不同的场景下具有不同的作用，需要深入理解其特点和用法，才能更好地发挥它们的价值。可以在实际项目中结合具体需求，充分利用这些导航钩子来打造更加智能、灵活的路由导航机制。
mao29955
65 1
大树营养快线
|
6月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
大树营养快线
71 2
邹荣乐
|
6月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据
vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据
邹荣乐
1376 0
邹荣乐
|
6月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载（按需加载）的作用以及常见的实现方法
vue中vue-router路由懒加载（按需加载）的作用以及常见的实现方法
邹荣乐
365 1

热门文章

最新文章

  • 1
    如何在阿里云的linux上搭建Node.js编程环境？
  • 2
    【Javascript系列】Terser除了压缩代码之外，还有优化代码的功能
  • 3
    jqtimeline.js-简单又好用的jquery时间轴插件
  • 4
    JavaScript：编程宇宙的多面闪耀之星-揭秘 JavaScript，编程界的全能霸主如何炼成？-优雅草卓伊凡
  • 5
    JS实现多条件搜索函数
  • 6
    JS实现实时输入验证
  • 7
    js如何把年月日转换为时间戳
  • 8
    前端基础的讲解-JS(7)
  • 9
    前端基础的讲解-JS(13)
  • 10
    前端基础的讲解-JS(8)
  • 1
    vue实现任务周期cron表达式选择组件
    32
  • 2
    Spring Boot 与 Vue.js 前后端分离中的数据交互机制
    64
  • 3
    Vue实现动态数据透视表（交叉表）
    129
  • 4
    vue2和vue3的响应式原理有何不同？
    71
  • 5
    高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图
    264
  • 6
    管理数据必备；侦听器watch用法详解，vue2与vue3中watch的变化与差异
    80
  • 7
    属性描述符初探——Vue实现数据劫持的基础
    37
  • 8
    你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
    74
  • 9
    极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
    348
  • 10
    【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗？-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
    141

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • JavaScript入门与实战
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月