前端路由（v-router）

1.什么是路由

路由（英文：router）就是对应关系

2.什么是前端路由

通俗易懂的概念：Hash地址（就是之前理解的锚链接）与组件之间的对应关系

而hash地址指的就是锚链接后面的值举个例子：

<!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.0"><title>Document</title><style>.box{height: 800px;}#b1{background-color: rgb(216, 74, 74);}#b2{background-color: pink;}#b3{background-color: orange;}#b4{background-color: rgb(62, 83, 90);}.side-bar{width: 220px;height: 45px;position: fixed;top: 0;left: 50%;}</style>
</head>
<body><div class="side-bar"><a href="#b1">b1</a><a href="#b2">b2</a><a href="#b3">b3</a><a href="#b4">b4</a></div><div class="box" id="b1"></div><div class="box" id="b2"></div><div class="box" id="b3"></div><div class="box" id="b4"></div>
</body>
</html>

注意：本地文件的地址在浏览器上运行时如果加入锚链接，则会跳转到锚链接的位置,
例如href=“#b1”就是跳转到id值为b1的区域位置，此时地址上会附加上hash地址，而路由就是hash与组件之间的以一一对应关系，而不同的hash就对应不同的组件页面。

3.前端路由的工作方式

用户点击了页面上的路由链接（a链接）
导致了URL地址栏中的Hash值发生了变化
前端路由监听了到Hash地址的变化
前端路由把当前Hash地址对应的组件渲染都浏览器中

path：hash地址 component：组件

4.vue-router的的基本使用

vue-router是vue.js官方给出的路由解决方案。它只能结合vue项目进行使用,I能够轻松的管理SPA项目中组件的切换。
vue-router 的官方文档地址:https://router.vuejs.org/zh/

5.vue-router安装和配置的步骤

1.安装vue-router包

安装命令如下：npm i vue-router@3.5.2 （版本）+ -S(表示记录到dependencies节点下)

2.创建路由模块(在src/router/index.js)

//src/router/index.js  就是当前模块下的router模块//1.导入Vue和VueRouter的包
import Vue from 'vue'
import VueRouter from 'vue-router'//2.调用Vue.uer()函数，叭VueRouter安装为Vue的插件
// Vue.use()函数的作用,就是来安装插件的
Vue.use(VueRouter)//3.创建路由的实例对象
const router = new VueRouter()//4.向外共享路由的实例对象
export default router

3.导入并挂载路由模块）（main.js）

import Vue from 'vue'
import App from './App.vue'
// 导入路由模块:拿到路由的实例对象
import router from './router/index.js'Vue.config.productionTip = falsenew Vue({render: h => h(App),// 在Vue项目中,要想把路由用起来,必须把路由实例对象,通过下面的方式进行挂载// router:路由的实例对象router,
}).$mount('#app')

4.声明路由链接和占位符

在index.js中添加

在所在父组件用路由占位符去占位

网页上如果要声明链接的话用Router-link不用a标签

1.路由重定向

路由重定向指的是:用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。通过路由规则的redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向:

只需要在router目录下添加redirect，path添加的路径为根目录

2.嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由

首先必须在要定义的相对父组件里面定义一个router-view来占据一个位置，而后在声明链接（哈希值）

而后通过children属性来声明子路由规则

在src/router/index.js路由模块中，导入需要的组件，并使用children属性声明子路由规则:

声明时一定要注意哈希地址要一一对应

这里要注意的是一定要将子路由的匹配规则写在其相对应的父组件里面，如果在还需要声明重定向的话需要在其父组件里面去重定向声明一下格式如上所示

还有一点就是“默认子路由”，当不声明重定向时，在子链接的哈希地址为空，组件会默认该链接是默认的子路由链接实例如下：

特性：一展示父组件会默认展示子路由的内容

4.动态路由匹配

动态路由指的是:把 Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。

在vue-router中使用英文的冒号(:)来定义路由的参数项。示例代码如下:

注意：在hash地址中，/ 后面的参数项目，叫做‘路径参数’

在路由“参数对象”中，需要使用this.$route.params 来访问路径参数

在hash地址中，？后面的参数项，叫做"查询参数"

在路由“参数对象”中，需要使用this.$route.query 来访问路径参数

在this.$route中，path只有路径部分；fullpath是完整的地址

、

5.声明式导航&编程式导航
在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如:
普通网页中点击<a>链接、vue 项目中点击<router-link>都属于声明式导航

在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如:
普通网页中调用location.href跳转到新页面的方式，属于编程式导航

5.1vue-router中的编程式的导航API

vue-router提供了许多编程式导航的API，其中最常用的导航API分别是：

this.$route.push('hash地址')

跳转到指定的hash地址，并增加一条历史记录

this.$router.replace('hash地址')

跳转到指定的hash地址，并替换掉当前的历史记录

this.$router.go(数值n)

根据n的值来确定需要回退的次数的历史记录

5.5 $router.go的简化用法
在实际开发中，一般只会前进和后退一层页面。因此vue-router提供了如下两个便捷方法:

注意：如果在行内使用变成导航跳转的时候，this必须shenglue，否则会报错

$router.back()
$router.forward()

6.导航护卫

导航收尾可以控制路由的访问权限，示意图如下

6.1 全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制:

// 创建路由实例对象
const router = new VueRouter({...})// 调用路由实例对象的beforeEach方法，即可声明“全局前置守卫”
// 每次发生路由导航跳转的时候，都会自动触发fn这个"回调函数"reouter.beforeEach(fn)

6.2守卫方法的形参

只要发生了路由的跳转，别烦会触发beforeEach的指定的function回调

全局前置守卫的回调函数中接受3个形参，格式为:

// 创建路由实例对象
const router = new VueRouter({...})// 全局前置守卫
router.beforeEach((to,from,next)=>{// to 表示将要访问的路由的信息对象// from 是将要离开的路由信息对象// next 是一个函数，调用next()表示放心，允许这次路由导航})// 调用路由实例对象的beforeEach方法，即可声明“全局前置守卫”
// 每次发生路由导航跳转的时候，都会自动触发fn这个"回调函数"reouter.beforeEach(fn)

注意：next()表示放行的意思，所以如果需在回调函数里面执行next函数next（）

当前用户拥有后台主页的访问权限，直接放行: next()
当前用户没有后台主页的访问权限，强制其跳转到登录页面: next('/login')

当前用户没有后台主页的访问权限，不允许跳转到后台主页:next(false)

分析:

要拿到用户将要访问的hash的地址
判断hash地址是否等于/main。

如果等于/main，证明需要登录之后才能访问成功
如果不等于/main，则不需要登录，直接放行,next()

3.如果访问的地址是/main，则需要读取localStorage中的token值

如果有token，则放行
如果没有token，则强制跳转到/login登录页

router.beforeEach(to,from,next)=>{if(to.path == '/main'){const token = localSorage.getItem('token')if(){next() // 访问的后台主页，且有token的值}else{next('/login')  // 访问的是后台主页，但是没有token的值}}else{next()   // 访问的不是后台主页，直接放行}})

前端路由（v-router）相关推荐

Vue学习笔记（六）--- 前端路由 Vue Router
一.路由 1.概念路由本质上来说就是一种对应关系,比如说我们在浏览器中输入不同的 url 地址,我们就能访问不同的资源,那么这 url 地址与资源之间的对应关系,就是路由. 2.分类 ① 后端路 ...
Vue前端路由~满满的干货
文章目录目标目录路由的基本概念与原理路由后端路由 SPA(Single Page Application) 前端路由实现简易前端路由 Vue Router vue-router的基本使用 ...
Vue前端路由~非常详细哦，不要错过
下面是对Vue前端路由的整理,希望可以帮助到有需要的小伙伴~ 文章目录目标目录路由的基本概念与原理路由后端路由 SPA(Single Page Application) 前端路由实现简易前 ...
Vue Router：vue中实现前端路由
Vue Router 官方文档文章目录一.路由简介路由分类路由安装二.路由基本使用安装路由器并设置路由规则实现路由切换指定组件的呈现位置 this中的 $router 和 $route ...
react router 级联路由_前端路由原理解析和实现
作者:@whinc链接:https://github.com/whinc/blog/issues/13 在单页应用如此流行的今天,曾经令人惊叹的前端路由已经成为各大框架的基础标配,每个框架都提供了强大 ...
前端路由简介以及vue-router实现原理
后端路由简介路由这个概念最先是后端出现的.在以前用模板引擎开发页面时,经常会看到这样 http://www.xxx.com/login 大致流程可以看成这样: 浏览器发出请求服务器监听到80端口( ...
前端路由以及浏览器回退，hash history location
一.前言其实不止一次想监听浏览器的回退方法,比如在 list.html 页滚动加载了几页列表,点到 detail.html 看详情,反回来时又得重新加载几页 H5 有背景音乐的,跳页就得重新放,体 ...
前端路由的概念与原理
前端路由router的概念与原理 1. 什么是路由路由(英文:router)就是对应关系. 2. SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与 ...
简单的基于hash和hashchange的前端路由
hash定义 hash这个玩意是地址栏上#及后面部分,代表网页中的一个位置,#后面部分为位置标识符.页面打开后,会自动滚动到指定位置处. 位置标识符 ,一是使用锚点,比如<a name=&quo ...
html5怎么改为vue_【面试需要Vue全家桶】一文带你看透Vue前端路由
作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020.1.11 背景介绍 vue router是vue.js ...

前端路由（v-router）

前端路由（v-router）相关推荐

最新文章

热门文章