手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

VueRouter 天天微头条

2023-04-27 10:10:44 来源：博客园

相关理解

vue-router

理解

vue的一个插件库，专门用来实现SPA应用。

对SPA应用的理解

单个Web应用(single page web application, SPA)。
整个应用只有一个完整的页面。
点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
数据需要通过ajax请求获取。

路由的理解

什么是路由？

一个路由就是一组映射关系 (key——value)。
key为路径， value可能是function或者component。

路由分类

后端路由

理解

value是function，用于处理客户端提交的请求。

(相关资料图)

工作过程

服务器接收到一个请求时，根据请求路径找到匹配的函数类来处理请求，返回响应数据。

前端路由

理解

value是component，用于展示页面内容。

工作过程

当浏览器的路径发生改变时，对应的组件就会显示。

基本路由

基本使用

1. 安装

安装vue-router: npm i vue-router@3ps: vue-router3只能在vue2中使用，vue-router4在vue3中使用。

2. 应用插件

在main.js里应用插件：

//引入路由import VueRouter from "vue-router"//使用路由Vue.use(VueRouter)

3. 编写router配置项

创建src/router/index.js

//该文件用于创建整个应用的路由器import VueRouter from "vue-router";//引入组件import Home from "../components/Home"import About from "../components/About"//创建并暴露一个路由器export default new VueRouter({    routes: [         {            path: "/Home",            component: Home         },         {            path: "/About",            component: About         }    ]})

4. 使用路由器

在main.js里使用路由器

//引入路由器import router from "./router"...// 创建Vue实例对象 new Vue({  render: h => h(App),  router//使用路由器}).$mount("#app")

5. 实现切换

active-class可以配置高亮样式：

AboutHome

6. 指定展示位置

注意

路由组件通常存放在pages文件夹，一般组件通常放在components文件夹。
通过切换，隐藏了路由组件，默认是被销毁的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息。
整个应用只有一个router，可以通过组件的$router属性获取到。

多级路由

配置

配置路由规则，使用children配置项

routes: [      {         path: "/Home",         component: Home,         children: [//通过children配置子级路由            {               path: "news", //路由匹配子级时会自动加/，所以这里不能写/news               component: News            },            {               path: "message",               component: Message            }         ]      }   ]

跳转

News

路由的query参数

使用

传递参数

{{ item.title }}{{ item.title }}

接收参数

$route.query.id$route.query.title

命名路由

作用

在某些情况可以简化路由跳转的代码。

使用

给路由命名

{path: "home",component: Home,children: [path: "message",component: Message,children: [{name: "Detail",//给路由命名path: "Detail",component: Detail}]]}

简化跳转

跳转跳转

路由的params参数

使用

配置路由，声明接收params参数

{         path: "/Home",         component: Home,         children: [            {               path: "news",               component: News            },            {               path: "message",               component: Message,               children: [                  {                     name: "Detail",                     path: "Detail/:id/:title", //:xxx占位符，用于parmas传参                     component: Detail                  }               ]            }         ]      }

传递参数

{{ item.title }}{{ item.title }}

路由的props配置

作用：让路由组件更方便的收到参数。

第一种写法

////值为对象，该对象中所有key-value都会以props的形式传给Detail组件props: {a: 1,b: "hello"}

第二种写法

//值为布尔值，若布尔值为真，就会把该路由组件收到的pramas参数以props的形式传给Detail组件props: true

第三种写法

//值为函数，该函数返回的对象种每一组key-value都会通过props传给Detail组件props($route) {return {id: $route.query.id,title: $route.query.title}}

router-link的replace属性

作用

控制路由跳转时操作浏览器历史记录的模式。浏览器的历史有两种写入方式：

push：追加记录。
replace：替换当前记录（不是所有记录，而是当前记录）。路由跳转默认为push。

使用

编程式路由导航

作用

不借助实现路由跳转，让路由跳转更加灵活

使用

//push方法跳转this.$router.push({name: "Detail",query: {id: item.id,title: item.title}})//replace方法跳转this.$router.replace({name: "Detail",query: {id: item.id,title: item.title}})//前进this.$router.forward()//后退this.$router.back()//前进n步this.$router.go(n)

缓存路由组件

作用

让不展示的路由组件保持挂载，不被销毁。

使用

缓存一个路由组件

缓存多个路由组件

两个新的生命周期钩子

作用

路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

使用

activated(){...},//路由组件被激活时调用deactivated(){...}//路由组件失活时调用

路由守卫

作用

对所有路由进行权限控制。

全局路由守卫

全局前置守卫

初始化时和每次路由切换之前执行。

// to目的地， from始发地， next到达执行//必须执行next()才能实现路由跳转router.beforeEach((to, from, next) => {   console.log("前置",to, from);   if(to.meta.isAuth) {//判断是否需要鉴定权限      if(localStorage.getItem("school") === "cloud") {         next()//放行      }else {         alert("学校名称不对，无权查看")      }   }else {      next()//放行   }})

全局后置守卫

路由切换之后执行。

router.afterEach((to, from) => {    console.log("后置",to, from);   //默认title是cloud，路由跳转后根据路由相应的title更改   document.title = to.meta.title || "cloud"//修改网页的title})

独享路由守卫

作用

对某个路由进行权限控制。只有独享前置守卫，没有独享后置守卫，可以与全局后置守卫配合使用。

beforeEnter(to, from, next) {console.log("独享", to, from);if (to.meta.isAuth) {//判断是否需要鉴定权限if (localStorage.getItem("school") === "cloud") {next()}else alert("学校名称不对，无权查看")}else next()}

组件内路由守卫

通过路由规则，进入该组件时调用。

beforeRouteEnter(to, from, next) {...}

通过路由规则，离开该组件时调用。

beforeRouteLeave(to, from, next) {...}

路由器的两种工作模式

对于一个url来说，什么是hash值？

#后面的内容就是hash值。

hash值不会包含在HTTP请求当中，即： hash值不会带给服务器。

hash模式

地址中永远带着#号，不美观。
若以后将地址通过第三方手机APP分享，若APP校验严格，则地址会被标记为不合法。
兼容性较好。（But IE已死）

history模式

地址干净、美观。
兼容性比起hash略差。
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

修改模式

修改模式在路由配置中添加mode属性，默认值是hash。

mode: "history"

关键词：