Vue.js 前端开发实战之 06-Vue 路由

初识路由

路由概述

程序开发中的路由分为后端路由和前端路由。

后端路由通过用户请求的 URL 分发到具体的处理程序，浏览器每次跳转到不同的 URL，都会重新访问服务器。

前端路由是一种在单页应用（SPA）中管理页面导航的技术。其主要作用是根据用户的操作（如点击链接）动态地加载和显示不同的页面内容，而无需重新加载整个页面。

单页面应用的核心思想之一，就是更新局部的视图，而不重新请求页面。

对于单页面应用来说，主要通过 URL 中的 hash 符号（# 号）来实现不同页面之前的切换。

前端路由在访问一个新页面的时候，仅仅只是变换了 hash 值，没有和服务端交互，不存在网络延迟，提升了用户体验。

vue-router 初体验

vue-router 是 Vue 官方推出的路由管理器，主要用于管理 URL，实现 URL 和组件的对应，通过 URL 进行组件之间的切换。

vue-router 3.x 文档：https://v3.router.vuejs.org/zh/

vue-router 的使用：

• 新建 HTML 文件，并使用 script 标签引入 vue.js、vue-router.js。
• 创建路由对象，配置一组路由。
• 实例化 Vue 实例，并将路由对象传递给 Vue 实例。
• 在 app 盒子中，使用 router-link 标签创建路由跳转按钮、使用 router-view 标签定义视图占位符。

示例：vue-router 初体验

入口页面（index.html）：

<divid="app"><!-- router-link：相当于a标签 to：相当于a标签的href属性 tag：把a替换成xxx --><router-linkto="/login"tag="button">登录</router-link><router-linkto="/register">注册</router-link><!-- router-view：充当视图占位符 --><router-view></router-view></div><scriptsrc="vue.js"></script><scriptsrc="vue-router.js"></script><script>// 定义路由对象// router路由管理者letrouter=newVueRouter({// routes：一组路由routes:[// {}：一条路由{path:'/login',// 路由地址component:{// 组件对象，不是组件名称template:'<h3>登录页面</h3>'}},{path:'/register',component:{template:'<h3>注册页面</h3>'}}]})letvm=newVue({el:'#app',data:{},// 将路由对象传递给Vue实例// router属性：路由对象router:router})</script>

示例效果：

路由模式

使用 vue-router 实现前端路由时，提供了两种模式。

• hash：vue-router 的默认模式，URL 中会包含 # 号。hash 模式利用了 window 监听 onhashchange 事件来实现的。
• history：URL 中不会包含 # 号。history 模式利用了 window.history.pushState 方法来实现的。

路由模式配置的基本用法：

letrouter=newVueRouter({mode:'history',// ...})

路由对象属性

路由对象表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录。路由对象是不可变的，每次成功地导航后都会产生一个新的对象。

this.$route 表示当前的路由对象。

路由对象的基本属性：

路由传参

query 传参

通过 query 方式传递参数，类似于 GET 请求，在页面跳转的时候，可以在地址栏看到请求参数。

示例：query 传参

入口页面（index.html）：

<divid="app"><router-linkto="/user?id=77&name=多仔">登录</router-link><router-view></router-view></div><script>letrouter=newVueRouter({routes:[{path:'/user',component:{template:'<h3>欢迎您，{{this.$route.query.name}}</h3>',created(){console.log(this.$route)}}}]})letvm=newVue({el:'#app',router:router})</script>

示例效果：

params 传参

使用 params 方式传递参数，类似于 POST 请求和 RESTFul 风格，将参数放在路径中或直接隐藏。

示例：params 传参

入口页面（index.html）：

<divid="app"><router-linkto="/user/77/多仔">登录</router-link><router-view></router-view></div><script>letrouter=newVueRouter({routes:[{// 使用:xx指定参数占位符path:'/user/:id/:name',component:{template:'<h3>欢迎您，{{this.$route.params.name}}</h3>',created(){console.log(this.$route)}}}]})letvm=newVue({el:'#app',data:{},router:router})</script>

示例效果：

嵌套路由

嵌套路由概述

嵌套路由就是在一个路由中嵌套一组子路由。

示例：嵌套路由

入口页面（index.html）：

<style>ul, li, h1{padding:0;margin:0;list-style:none;}#app{width:100%;display:flex;flex-direction:row;}ul{width:200px;flex-direction:column;color:#fff;}li{flex:1;background:#000;margin:5px auto;text-align:center;line-height:30px;}.about-detail{flex:1;margin-left:30px;}.about-detail h1{font-size:24px;color:blue;}</style><divid="app"><ul><router-linkto="/about"tag="li">关于公司</router-link><router-linkto="/contact"tag="li">联系我们</router-link></ul><router-view></router-view></div><!-- 关于公司-template --><templateid="about-template"><divclass="about-detail"><h1>北京xx科技有限公司简介</h1><router-linkto="/about/detail">公司简介</router-link>|<router-linkto="/about/governance">公司治理</router-link><router-view></router-view></div></template><!-- 联系我们-template --><templateid="contact-template"><divclass="about-detail"><h1>联系我们</h1><p>公司位于北京市海淀区中关村科技园内，主营业务包括餐饮娱乐、服装设计等</p></div></template><!-- 公司简介-template --><templateid="detail-template"><div><p>xx是全球领先... ...</p></div></template><!-- 公司治理-template --><templateid="governance-template"><div><p>公司坚持以客户为中心、以奋斗者为本... ...</p></div></template><script>letrouter=newVueRouter({routes:[{// 关于公司path:'/about',component:{template:'#about-template'},// “关于公司”路由的子路由列表children:[{// 公司治理// 子路由的path属性前不能带有/// 子路由地址 = 父路由 + "/" + 子路由path:'governance',component:{template:'#governance-template'},},{// 公司简介path:'detail',component:{template:'#detail-template'},}]},{// 联系我们path:'/contact',component:{template:'#contact-template'}}]})letvm=newVue({el:'#app',router:router})</script>

示例效果：

命名路由

命名路由概述

vue-router 提供了一种隐式的引用路径，即命名路由。

在创建路由时，给路由指定 name 名称，链接路由跳转时，通过路由的名称取代路由地址。

示例：命名路由

入口页面（index.html）：

<divid="app"><!-- :to：为router-link绑定要跳转的路由对象的信息 name：路由名称 params：要使用params方式传递的参数 --><router-link:to="{name:'user', params: {name:'多仔'}}">登录</router-link><router-view></router-view></div><script>letrouter=newVueRouter({routes:[{path:'/user',name:'user',// 指定路由名称component:{template:'<h3>欢迎您，{{this.$route.params.name}}</h3>'}}]})letvm=newVue({el:'#app',router:router})</script>

示例效果：

命名视图

命名视图概述

vue-router 提供了命名视图，可以通过命名视图来在同一个路由中渲染多个组件。

示例：命名视图

入口页面（index.html）：

<divid="app"><!-- name：为视图占位符取名字 视图占位符默认的名字为default --><router-viewname="default"></router-view><router-viewname="main"></router-view></div><script>letrouter=newVueRouter({routes:[{path:'/',components:{// 该路由对应多个组件// 视图名称: 组件对象'default':{template:'<h3>default</h3>'},'main':{template:'<h3>main</h3>'}}}]})letvm=newVue({el:'#app',router:router})</script>

示例效果：

编程式导航

router.push

router.push 方法用于实现路由跳转，路由跳转时会在 history 中添加一条新的记录。

router.push 的基本用法：

router.push(跳转路径)router.push({path:跳转路径})router.push({path:跳转路径,query:query传参参数对象})router.push({name:跳转路由名称,params:params传参参数对象})

示例：router.push

入口页面（index.html）：

<divid="app"><button@click="goStart1">跳转1</button><button@click="goStart2">跳转2</button><router-view></router-view></div><script>letrouter=newVueRouter({routes:[{path:'/user',name:'user',component:{template:'<div><p>用户名query：{{this.$route.query.name}}</p><p>用户名params：{{this.$route.params.name}}</p></div>'}}]})letvm=newVue({el:'#app',router:router,methods:{goStart1(){// 使用path + query传递参数this.$router.push({path:'/user',query:{name:'admin'}})},goStart2(){// 使用name + params传递参数this.$router.push({name:'user',params:{name:'admin'}})}}})</script>

示例效果：

router.replace

router.replace 方法用于实现路由替换，路由替换时不会在 history 中添加一条新的记录。

router.replace 的基本用法：

router.replace(替换路径或替换的路由对象)

router.go

router.go 方法用于实现路由的前进和后退，类似于 history.go、history.forward、history.back 等方法。

router.go 的基本用法：

// 路由前进router.go(1)// 路由后退router.go(-1)// 路由刷新router.go(0)

路由守卫

全局前置守卫

全局前置守卫在路由跳转之前进行拦截，执行操作。

全局前置守卫是最常用的导航守卫，它主要作用于登录验证，获取用户权限信息等场景。

全局前置守卫的基本用法：

router.beforeEach((to,from,next)=>{// to: 即将进入的目标路由对象// from: 正在离开的路由对象// next: 路由下一步操作的函数// next(): 直接跳转到目标路由// next('/path'): 跳转到一个不同的地址// ...})

示例：全局前置守卫

入口页面（index.html）：

router.beforeEach((to,from,next)=>{if(用户未登录){// 重定向到登录页面next({path:'/login'})}else{// 正常跳转next()}});

全局后置守卫

全局后置守卫在路由跳转之前进行拦截，执行操作。

全局后置守卫主要作用于滚动条回调、更新页面标题等场景。

全局后置守卫的基本用法：

router.afterEach((to,from)=>{// ...})

示例：全局后置守卫

入口页面（index.html）：

router.afterEach((to,from)=>{window.scrollTo(0,0);})