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

Vue.js路由router

2018-08-28 1205
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 一、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
目录
相关文章
土木林森
|
1月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性，涵盖前端路由概念、基本原理、常见实现方式（Hash路由和History路由）、优点及挑战，并通过实际案例分析，帮助开发者更好地理解和应用这一关键技术，提升用户体验。
土木林森
75 1
东方睿赢
|
2月前
|
资源调度 JavaScript 前端开发
路由管理：Vue Router的使用和配置技巧
【10月更文挑战第21天】路由管理：Vue Router的使用和配置技巧
东方睿赢
53 3
CamilleKing
|
2月前
|
缓存 JavaScript 搜索推荐
Vue Router 导航钩子的使用场景
【10月更文挑战第13天】
CamilleKing
22 1
mao29955
|
2月前
|
JavaScript 搜索推荐 数据处理
Vue Router 导航钩子
【10月更文挑战第17天】需要注意的是，过度使用导航钩子可能会导致代码复杂度增加，因此需要合理规划和使用。此外，不同的钩子在不同的场景下具有不同的作用，需要深入理解其特点和用法，才能更好地发挥它们的价值。可以在实际项目中结合具体需求，充分利用这些导航钩子来打造更加智能、灵活的路由导航机制。
mao29955
33 1
大树营养快线
|
2月前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
大树营养快线
43 2
邹荣乐
|
2月前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据
vue3中常用插件的使用方法：按需引入自定义组件，自动导入依赖包，自动生成路由，自动生成模拟数据
邹荣乐
921 0
邹荣乐
|
2月前
|
JavaScript 前端开发 UED
vue中vue-router路由懒加载（按需加载）的作用以及常见的实现方法
vue中vue-router路由懒加载（按需加载）的作用以及常见的实现方法
邹荣乐
225 1
大树营养快线
|
2月前
|
JavaScript 前端开发 UED
如何在 Vue 中实现路由懒加载？
【10月更文挑战第5天】
大树营养快线
28 1
土木林森
|
1月前
|
JavaScript UED
"Vue实战技巧大揭秘：一招解决路由跳转页面不回顶部难题，让你的单页面应用用户体验飙升！"
【10月更文挑战第23天】在Vue单页面应用中，点击路由跳转时，默认情况下页面不会自动滚动到顶部，这可能影响用户体验。本文通过一个新闻网站的案例，介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法，实现路由跳转时页面自动滚动到顶部的功能，提升用户浏览体验。
土木林森
95 0
邹荣乐
|
2月前
|
JavaScript API
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
Vue中使用require.context()自动引入组件和自动生成路由的方法介绍
邹荣乐
87 0

热门文章

最新文章

  • 1
    Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
  • 2
    Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么？
  • 3
    基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
  • 4
    在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
  • 5
    Vue3中使用provide/inject来避免v-model的循环引用
  • 6
    Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
  • 7
    除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
  • 8
    Node.js 的事件驱动机制
  • 9
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
  • 10
    如何使用内存监控工具来优化 Node.js 应用的性能
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    57
  • 2
    js设计模式-观察者模式与发布/订阅模式
    75
  • 3
    js设计模式-策略模式与代理模式的应用
    76
  • 4
    深入理解JavaScript中的闭包机制
    64
  • 5
    使用Vue.js构建交互式前端的技术探索
    92
  • 6
    使用Node.js构建实时聊天应用的技术指南
    138
  • 7
    深入理解JavaScript中的事件循环机制
    93
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    124
  • 9
    JavaScript 数组方法概览
    39
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    71

    • 相关课程

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

    • 相关电子书

    更多
  • JavaScript 语言在引擎级别的执行过程
  • Python第五讲——关于爬虫如何做js逆向的思路
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)