【Vue】vue？vue0

前言

Vue Router 是Vue 框架的一个非常重要的功能。

目标

1 单页应用程序和多页应用程序之间的区别。

2 vue-router的具体实现方法；

3 什么是路由模式以及它们有何不同？

4. 如何实现根防护和根缓存。

一 路由的概念

概念

Vue Router 是Vue 提供的路由管理器。组件和路由之间存在一一对应的关系，这种对应关系称为路由。

Vue是一个典型的SPA单页面应用框架。 SPA单页是指你的网站只有一个HTML页面，所有的页面切换都是在这一页面上完成的。所有不同组件之间的切换都是通过单页和多页应用程序完成的。

当编程开发兴起时，使用多个HTML页面来进行页面之间的切换。这是第一个MPA 多页应用程序。随着技术的发展，这种页面切换方式的缺点也逐渐显现出来。例如，每次切换页面时都需要加载资源，这会导致用户体验非常差，并且会给服务器带来很大的负载。为了解决多页面应用的问题，引入了SPA单页面应用。 SPA单页面应用是指单个HTML页面，通过路由实现不同组件之间的切换。当您第一次进入页面时，会加载相关资源并将内容功能封装到组件中。页面切换的底层是组件切换，它解决了多页面应用的很多缺点。然而，单页应用程序并不完美。首次加载相关资源时，SPA首页加载缓慢。

分类实现方法、页面性能、开发效率、用户体验、首屏加载、其他页面加载、SEO、单页、一个HTML、按需更新性能、高、很好、慢、快、差、多页、多html，页面整体更新性能，差，一般，平均，速度，慢，优秀

SPA单页面和MPA多页面应用方式各有优缺点，根据您项目的需求，可以选择更合适的开发方式（SPA应用是目前的主流）。

vue-router 是Vue.js 的官方路由插件，与vue.js 紧密集成，适合构建单页应用程序。

二 准备工作

1 安装

npm 安装vue-router@3.6.5 –save

这里需要注意的是，Vue版本必须与vue-router版本相对应。否则在安装过程中将无法使用。

vue2.x对应的vue-router版本是vue-router3.x。

vue3.x对应的vue-router版本是vue-router4.x2。

从‘vue-router’导入路由器//导入

Vue.use(Router) //注册

new Router({})//创建路由

一个项目不能只有一两个路由和组件映射。

如果你的路由很多，直接在main.js中写路由配置显然更难维护。我们将直接创建一个封装router.js 的文件。

登录后复制

从“vue”导入Vue

从“vue-router”导入路由器

//引入组件

从“./views/HelloWord”导入helloWord

从“./views/School”导入学校

Vue.use（路由器）

//路由和组件绑定

导出默认的新路由器({

根： [ {

name:\’学校\’,

路径： \’/学校\’,

组件： 学校

},{

name:\’地狱之言\’,

path: \’/helloWord\’,

组件： helloWord，

}]

})

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19。

3 全球导入路由

在main.js 中全局导入

登录后复制

从“./router”导入路由器

新Vue({

el: \’#app\’,

router, //引入路由

render: h=h(应用程序),

创建之前（）{

//全局事件总线

Vue.prototype.$bus=this

}

}).$mount(\’#app\’)

1.2.3.4.5.6.7.8.9.10。

现在准备工作已经完成。

如果你对上面的操作满意，你可以将vur-router提供的$router和$route方法打印到控制台。打印成功后，就可以使用路由了。

r

啊

你

t

e

每个组件的唯一路由信息

Routes 每个组件自己的路由信息

每个组件唯一的路由信息路由器全局相同，是通用的路由方法。

三 路由基本方法

3.1 声明式导航与编程式导航

声明式路由导航

声明式导航使用模板中的特定指令来实现页面导航。在Vue模板中，使用router-link组件创建导航链接，并设置to属性来指定目标路由或命名路由的路径。例如：

登录后复制

router-link to=\’/search\’ 跳转到搜索页面/router-link

1.

优点：简单直观，在模板中编写导航链接不需要额外的Js代码。程序化导航

程序化导航是通过使用Vue Router提供的JS代码中的API实现页面导航来实现的。一旦你访问了$router对象，你就可以使用它提供的方法（push、replace、go等）来跳转到页面。例如：

登录后复制

this.$router.push(\’/search\’);

1.

优点：可以根据条件或者Js代码中的动态数据进行导航，更加灵活可控。

1 声明式导航

路由器链接

通过设置to 属性指定路径（必需）。本质还是标签，所以没必要#。

to 后面可以跟路径或名称

登录后复制

//到路径。默认类似于$router.push，跳转到路由并添加路由历史记录。

router-link class=\’link\’ to=\’/helloWord\’Helloword/router-link

//姓名

router-link class=\’link\’ to=\’helloword\’Helloword/router-link

//替换当前历史记录并跳转到指定路由

router-link class=\’link\’ 替换为=\’helloword\’Helloword/router-link

1.2.3.4.5.6。

2 编程式导航

$router.push

跳转到指定路由，并在路由信息中添加历史信息

登录后复制

按钮类=\’链接\’@click=\’jump(1)\’hellword/button

跳转（类型）{

console.log(\’类型\’, 类型)

如果（类型==1）{

//路径方法跳转

//this.$router.push(\’/helloWord\’)

//this.$router.push({path:\’/helloWord\’})

//命名方法跳转

this.$router.push({name:\’地狱之言\’})

} 除此之外{

this.$router.push(\’/school\’)

}

}

1.2.3.4.5.6.7.8.9.10.11.12.13。

$router.replace

替换当前历史记录并跳转到指定路线

登录后复制

按钮类=\’链接\’@click=\’jump(1)\’hellword/button

跳跃（类型）{

console.log(\’类型\’, 类型)

如果（类型==1）{

this.$router.replace({name:\’地狱之言\’})

} 除此之外{

this.$router.push(\’/school\’)

}

}

1.2.3.4.5.6.7.8.9。

$router.go()

您可以在浏览历史记录中向前或向后移动（正数- 向前，0 – 刷新，负数- 向后）

登录后复制

this.$router.go(0) //更新

this.$router.go(-1) //返回1

1.2.

$router.back()

返回历史记录的上一页$router.forward()

转到历史记录的下一页

完整代码

登录后复制

模板

div id=\’应用程序\’

小时/时间

div 类=\’flex\’

div 类=\’Navi\’

方法一

router-link class=\’link\’ to=\’/helloWord\’Helloword/router-link

router-link class=\’link\’ to=\’/school\’school/router-link

方法2

按钮类=\’链接\’@click=\’jump(1)\’hellword/button

按钮类=\’链接\’@click=\’jump(2)\’学校/按钮

/div

div 类=\’内容\’

路由器视图/路由器视图

/div

/div

/div

/模板

脚本

导出默认值{

name: \’应用程序\’,

数据（） {

返回{

};

},

安装（）{

},

方法：{

跳跃（类型）{

console.log(\’类型\’, 类型)

如果（类型==1）{

//路径方法跳转

//this.$router.push(\’/helloWord\’)

//this.$router.push({path:\’/helloWord\’})

//命名方法跳转

//this.$router.push({name:\’hellword\’})

} 除此之外{

this.$router.push(\’/school\’)

}

},

},

};

/剧本

风格

应用程序{

font-family: Avenir、Helvetica、Arial、无衬线字体；

-webkit-font-smoothing: 抗锯齿；

-moz-osx-font-smoothing: 灰度；

文本对齐：居中；

color: #2c3e50;

边距-top: 60px；

}。柔性{

显示器： Flex。

}

.nav {

宽度： 120 像素；

显示器： Flex。

flex-direction: 列；

}。关联{

边距： 3px 10px；

宽度： 100 像素；

高度： 60 像素；

行高： 60px；

字体大小： 20px；

文本装饰： 无。

border: 1px 纯蓝色；

边框半径： 4px;

}。内容{

width: 计算(100% – 100px);

高度： 800 像素；

背景颜色： #eee;

}

/风格

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.4 4.45.46.47.48.49.50 51.52.53.54.55.56.57.58.59.60.61.62.63.64.65.66.67.68.69.70.71.72.73.74.75.76.77.78.79.80.81.82。

执行结果

3.2 嵌套(多级)路由

学校部分下还有学生路线。这可以写成：

/子页面访问路径/school/student没有添加到子子根路径中。

登录后复制

导出默认新路由器({

根： [ {

name:\’学校\’,

路径： \’/学校\’,

组成部分：学校，

孩子：[{

name:\’学生\’,

path: \’学生\’,

组件：学生，

}]

},{

name:\’你好词\’,

path: \’/helloWord\’,

组件： helloWord，

}]

})

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16。

学校组成部分

登录后复制

模板

分配

我在学校

时间

div @click=\’$router.push(\’/school/student\’)\’显示学生/div

路由器视图/路由器视图

/div

/模板

1.2.3.4.5.6.7.8。

3.3 路由中的参数

3.3.1 query参数

显式传递参数1. 在路径后加入参数2. 通过编程路由传递查询参数

登录后复制

this.$router.push({path:\’/helloWord\’,query:{id:\’01\’,name:\’张二\’}})

1.

3 注册路由参数

注册路由时一般不需要添加参数。

登录后复制

{

name:\’你好词\’,

path: \’/helloWord\’,

组件： helloWord，

查询：{

id:\’02\’,

name:\’张三\’

}

}

1.2.3.4.5.6.7.8.9。

3.3.2 params参数

1 pass后传递参数

登录后复制

path: \’/helloWord/:id/:name\’ //比较ID和名称的位置

1.

2 编程式路由参数传输

登录后复制

this.$router.push({name:\’helloword\’,params:{id:\’01\’,name:\’张二\’}})

1.

: 特别注意，如果路由携带参数作为参考，则参数不能与路径一起使用，只能与名称一起使用。

params 方法仅通过上面列出的两种方式传递参数。

3.4 命名路由

然后，您可以使用名称而不是路径将to 属性传递给路由器链接。

登录后复制

导出默认新路由器({

根： [ {

name:\’学校\’,

路径： \’/学校\’,

组成部分：学校，

孩子：[{

name:\’学生\’,

path: \’学生\’,

组件：学生，

}]

}]

})

1.2.3.4.5.6.7.8.9.10.11.12。

3.5 props

根props参数1是一个对象，该对象中的所有键值都会以props的形式传递给组件。

登录后复制

{

name:\’你好词\’,

path: \’/helloWord\’,

组件： helloWord，

props:{id:\’003\’,name:\’林三毛\’},

}

1.2.3.4.5.6。

登录后复制

模板

分配

我是你好词

/div

/模板

脚本

导出默认值{

name: \’HelloWord\’,

props:[\’id\’,\’name\’], //接收参数

安装（）{

console.log(\’======id======\’,this.id)

console.log(\’======名称======\’,this.name)

}

}

/剧本

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15。

2 布尔值。如果值为true，则路由组件接收到的所有params 参数都会以props 的形式传递给组件。

登录后复制

{

name:\’你好词\’,

path: \’/helloWord\’,

组件： helloWord，

道具：true

}

1.2.3.4.5.6。

登录后复制

this.$router.push({name:\’helloword\’,params:{id:\’01\’,name:\’张二\’}})

模板

分配

我是你好词

/div

/模板

剧本&

gt;
export default {
name: \’HelloWord\’,
props:[\’id\’,\’name\’], // 接收传参
mounted(){
console.log(\’=====id======\’,this.id)
console.log(\’=====name======\’,this.name)
}
}
</script>

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.

3 值为函数

登录后复制

{
name:\’helloword\’,
path: \’/helloWord\’,
component: helloWord,
props($route){
// $route组件的路由信息
return {id:$route.query.id,name:$route.query.name}
},
query:{
id:\’02\’,
name:\’张三\’
}
}

1.2.3.4.5.6.7.8.9.10.11.12.13.

登录后复制

<template>
<div>
我是HelloWord
</div>
</template>
<script>
export default {
name: \’HelloWord\’,
props:[\’id\’,\’name\’], // 接收传参
mounted(){
console.log(\’=====id======\’,this.id)
console.log(\’=====name======\’,this.name)
}
}
</script>

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.

四 路由守卫

执行顺序

跳转

前置路由守卫

独享路由守卫

组件内路由守 – 进

组件内路由守卫 – 离

后置路由守卫

4.1 全局路由守卫(前/后置)

routes路由中的属性不可以随意的自定义，而是要在meta属性中自定义，其他地方自定义属性都会失效

登录后复制

Vue.use(Router)
const routes = new Router({
routes: [ {
name:\’school\’,
path: \’/school\’,
component: School,
meta:{
isAuth:true,
title:\’学校\’
},
children:[{
name:\’student\’,
path: \’student\’,
component: Student,
meta:{
isAuth:true,
title:\’学生\’
},
}]
},
{
name:\’helloword\’,
path: \’/helloWord\’,
component: helloWord,
meta:{
isAuth:true,
title:\’首页\’
},
}]
})“`
**前置路由守卫 beforeEach**，顾名思义在路由跳转之前执行，这里一般可以做页面权限校验等操作
“`c
// 前置路由守卫
/**
to 目的地
from 起始地
next 放行
**/
routes.beforeEach((to,from,next)=>{
if(to.meta.isAuth){
next()
}
})

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.27.28.29.30.31.32.33.34.35.36.37.38.39.40.41.42.43.

前置路由守卫 beforeEach，顾名思义在路由跳转之前执行，这里一般可以做页面权限校验等操作。
初始化时候、每次路由切换之前被调用

登录后复制

// 前置路由守卫
/**
to 目的地
from 起始地
next 放行：路由跳转，next下的代码还会继续的执行
**/
routes.beforeEach((to,from,next)=>{
if(to.meta.isAuth){
next()
}else{
alert(\’你没有权限\’)
}
})

1.2.3.4.5.6.7.8.9.10.11.12.13.

后置路由守卫 afterEach，顾名思义在路由跳转之后执行，这里可以做title更改。
初始化时候、每次路由切换之后被调用

登录后复制

// 后置路由守卫
/**
to 目的地
from 起始地
**/
routes.afterEach((to,form)=>{
document.title = to.meta.title
})

1.2.3.4.5.6.7.8.

4.2 独享路由守卫

独享路由守卫 beforEnter，顾名思义就是某一个路由独自享有的，只由触发改路由时才会执行类似路由的前置
执行顺序：全局前置 –> 独享路由 –> 全局后置

登录后复制

children:[{
name:\’student\’,
path: \’student\’,
component: Student,
meta:{
isAuth:true,
title:\’学生\’
},
// to form 用法同上
beforeEnter:(to,form,next)=>{
console.log(to,form);
next()
}
}]

1.2.3.4.5.6.7.8.9.10.11.12.13.14.

4.3 组件内路由守卫

在组件内部设置该组件的路由守卫beforeRouteEnter 进入该组件时触发beforeRouteLeave 离开该组件时触发(切换路由)

登录后复制

<template>
<div>
我是HelloWord
</div>
</template>
<script>
export default {
name: \’HelloWord\’,
props:[\’id\’,\’name\’],
data(){
return{}
},
// 进入该该组件时触发
beforeRouteEnter(to,from,next){
console.log(\’=====enter-to======\’,to)
console.log(\’=====enter-from======\’,from)
next()
},
// 离开该组件时触发
beforeRouteLeave(to,from,next){
console.log(\’=====leave-to======\’,to)
console.log(\’=====leave-from======\’,from)
next()
}
}
</script>

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.

五 其它

5.1 路由模式

1. hash模式

修改为hash模式

登录后复制

const routes = new Router({
// 模式 默认为hash
mode: \’hash\’,
})

1.2.3.4.

#及其后面的值都是hash值
将打包后的文件发布到服务器上(如何没有线上服务器可以启动本地服务发布参考：)
hash值有特殊的#标识，不会传送给服务器端

2. history模式

修改为history模式

登录后复制

const routes = new Router({
// 模式
mode: \’history\’,
})

1.2.3.4.

打包后发到本地无服务上，点击可以正常的访问，但是一旦刷新页面就如下所示，这是因为刷新的时候页面会当成资源去请求服务器，服务器找不到此接口就会报错

解决办法：

node中connect-history-api-fallback插件是专门解决此问题的；ngix中配置分辨是否前端路由通过后端去处理

3. 总结

hash模式

1.地址中永远带着#号，不美观。
2.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
3.兼容性较好。
4.hash值不会包含在 HTTP 请求中，即: hash值不会带给服务器。

history模式

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

5.2 keep-alive缓存路由组件

原理

我们知道vue是通过vnode实现保存节点的，而keep-alive本身也是通过保存vnode来实现缓存的，而不是直接存储DOM结构。其实就是将需要缓存的VNode节点保存在this.cache中，在render时,如果VNode的name符合在缓存条件(可以用include以及exclude控制)，则会从this.cache中取出之前缓存的VNode实例进行渲染。

作用

keep-alive组件是vue2.0提供的一个缓存组件，在组件切换过程中把切换出去的组件保留在内存，不被销毁，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

效果

keep-alive组件，只要将子组件嵌套在这里面就可以实现组件的缓存，当页面返回时数据不会丢失，实现了我们常见的历史页面不刷新的效果

参数Props

include – 类型字符串、数组以及正则表达式，只有匹配的组件会被缓存exclude – 类型字符串、数组以及正则表达式，匹配的组件不会被缓存max – 类型字符或者数字，可以控制缓存组件的个数，缓存组件的最大值

登录后复制

// 只缓存组件name为a或者b的组件
<keep-alive include=\”a,b\”>
<component />
</keep-alive>
​
// 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染)
<keep-alive exclude=\”c\”>
<component />
</keep-alive>
​
// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件
<keep-alive include=\”a,b\” exclude=\”b\”>
<component />
</keep-alive>
​
// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
<keep-alive exclude=\”c\” max=\”5\”>
<component />
</keep-alive>

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.

用法

1、与include结合使用

登录后复制

// include 只缓存组件名字为home的组件，其他组件不会缓存，而exclude恰好相反
<keep-alive include=\”home\”>
<router-view />
</keep-alive>

1.2.3.4.

2、结合Router中的meta属性来控制组件缓存

登录后复制

{
path: \’/\’,
name: \’home\’,
meta:{
keepAlive:true // 需要缓存
},
component: Home,
children: [
{
path: \’goods\’,
name: \’goods\’,
component: Goods,
meta: {
keepAlive: false // 不需要缓存
}
}
]
}

1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.

登录后复制

<keep-alive>
<router-view v-if=\”$route.meta.keepAlive\” />
</keep-alive>
<router-view v-if=\”!$route.meta.keepAlive\” />

1.2.3.4.

缓存所有页面：

登录后复制

在app.vue页面里加keep-alive

缓存部分页面：

登录后复制

1、在app.vue页面里加keep-alive，结合keep-alive的include属性
2、结合Router中的meta属性，在app.vue页面里加$route.meta.keepAlive的if判断

小知识点
1、同时使用include，exclude，那么exclude优先于include

2、缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件

3、keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例

4、keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称

5、只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0
版本之后，包含在 keep-alive 中，但符合 exclude ，不会调用activated和
deactivated这两个函数钩子！另外，在服务端渲染时，此钩子函数也不会被调用

5.3 生命周期变化

针对路由缓存组件的多加了两个生命周期函数

1.activated

在 keep-alive 组件激活时调用该钩子函数在服务器端渲染期间不被调用使用 keep-alive会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created钩子函数中获取数据的任务。

登录后复制

activated(){
/**
* 缓存的组件点击时调用
*/
},

1.2.3.4.5.

2.deactivated

在 keep-alive 组件停用时调用该钩子函数在服务器端渲染期间不被调用被包含在 keep-alive中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

登录后复制

deactivated(){
/**
* 缓存的组件点击时调用
*/
},

1.2.3.4.5.

 keep-alive的用法及详解

总结

1、如何配置路由？

2、如何使用导航进行路由跳转

声明式：router-link
编程式：this.$ router.push，this.$ router.g等

3、嵌套(多级)路由如何配置与使用

父级路由中加children，children下就是子路由子路由中的path不加/子页面访问路径 /school/student

4、路由如何传递传参

this.$router.push({path:‘/helloWord’,query:{id:‘01’,name:‘张二’}})

this.$router.push({name:‘helloword’,params:{id:‘01’,name:‘张二’}})
props
路径冒号参数项：about/:id/:name

5、路由守卫

前置守卫 routes.beforeEach((to,from,next)=>{}) ，后置守卫 routes.afterEach((to,from,next)=>{})
独享路由守卫
组件内路由守卫

6、路由缓存

keep-alive

#以上关于【Vue】vue的相关内容来源网络仅供参考，相关信息请以官方公告为准！