vue笔记-VueRouter篇-路由的概念
1.前端路由和后端路由的区别
首先要搞懂路由的概念,所谓的路由指的是根据不同的url执行相应的操作,比如点击百度新闻时,当点击国内按钮,则对应的地址为http://news.baidu.com/guonei,点击国际按钮时,对应的地址为http://news.baidu.com/guoji,它只是将guonei改为了guoji,当后台接收到该url时,会进行判断,如果最后边的字符串为guonei,则将此请求发送给处理国内逻辑的代码,如果为guoji,则将请求发给处理国际逻辑的代码,而负责转发请求的操作就是路由负责的事情
后端路由是对传递的url进行转发和响应,它是由后端程序控制
因为vue是但组件页面,所以在最后生成的文件中只有一个页面,那么如何动态的显示不同的组件,这就需要前端路由完成了,和url类似,它也是根据传递的字符串进行动态切换当前页面
vue-router就是用来处理vue中路由跳转等功能的一个插件,对应的网址为https://router.vuejs.org/zh/
2.hello world
先通过vuecli创建一个新项目,在创建时可以选择默认安装vue-router的方式,当项目创建好之后,对应的配置也完成了,在项目中就可以直接使用路由功能了
为了搞清楚它在创建项目时具体配置了哪些东西,本次不使用默认的方式安装,而是通过手动的方式一步步配置
使用vuecli创建一个不带vue-router功能的项目
在使用路由功能前需要先对其进行安装
npm install vue-router
当出现此提示时表名路由已经安装成功
项目创建好之后需要在main.js中配置插件
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
其中router是通过router目录下的index.js文件导出的一个vuerouter对象
将其单独放在一个目录下便于后期的管理
在index.js中首先导入vuerouter对象中的createRouter方法
import { createRouter, createWebHistory } from 'vue-router'
接着配置跳转url和对应组件的信息
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
这是一个数组,其中每个下标中存放着url和组件对应的信息,第一个是通过引用已加载的组件,第二个则是只有当此路径使用时才会加载对应的组件,称之为懒加载
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
最后将配置项数组传给createRouter方法,它会根据配置项返回创建好的router,接着将此对象导出,这样在main.js中就可以直接使用了
添加了路由功能后,如果想使用则需要指定路由页面渲染的地方,此配置是在App.vue中配置的
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view>
</router-view></div>
</template>
vue-router会根据配置的路由信息,将对应的组件内容放在
启动项目后访问根路径,根据配置可知默认会显示Home组件
点击About后页面会切换为About组件中的内容
可以看到当点击链接后页面并没有整体刷新,变化的只有url后的路径和页面特定部分的内容,此效果就是vue-router提供的路由功能
3.前端路由监听url改变的两种方式
对于url变化后切换页面目前有两种模式,第一种为history模式,另一种为hash模式
前端路由的本质是当url发生改变时不刷新页面,这两种模式都可以实现此效果,区别在于hash模式在url中会带一个#,而history并不会
它们都是基于浏览器自带的功能实现的,一般开发中使用最多的就是history模式了,它对应底层的history.pusState方法
4.动态路由、嵌套路由与参数传递
除了则页面上使用之外,当vuerouter被注册到vue实例中后,vue提供了$router和$route对路由进行操作
动态路由
首先将home的链接进行修改
<router-link to="/home">Home</router-link> |
在router的index.js中进行配置
const routes = [
{
path: '/:aa',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
此处的path中对应的就是动态路由,当页面上访问/about或者/home时都会跳转到About组件界面,而它们后面的路径则会存放在aa变量中,变为了路由的参数,此参数值通过this.$route即可获取
嵌套路由
普通路由是将整个页面的内容替换掉,而嵌套路由是替换指定的部分,比如点击tab页切换内容,被切换的部分就是嵌套路由实现的
在About组件中添加嵌套路由需要显示的位置
<template>
<div class="about">
<h1>This is an about page</h1>
<h1>嵌套路由</h1>
<router-view>
</router-view></div>
</template>
重新创建两个组件
在需要展示嵌套路由的中组件下使用children配置路由
const routes = [
{
path: '/:aa',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
children: [
{
path: 'c1',
name: 'AboutC1',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutC1.vue'),
},
{
path: '/c2',
name: 'AboutC2',
component: () => import(/* webpackChunkName: "about" */ '../views/AboutC2.vue'),
},
]
}
]
嵌套路由有两种访问方式,如果在path中添加/,那么就使用绝对路径访问,否则需要添加父路由路径
5.全局、组件、路由内导航守卫
导航守卫就是类似于现实中的一个哨兵,用于实现路由发生变化需要时需要做的功能,在vue-router中通过beforeEach函数实现,根据作用域不同可分为全局、组件内、路由内三种类型
创建好router对象后,调用导航守卫方法
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
console.log('导航守卫。。。', to)
next()
})
当页面上的路由变化时就可以被导航守卫监听到
如果不想让此次路由跳转生效,只需要将next方法移除
6.keep-alive
keep-alive是vue的内置组件,主要的作用就是将不活动的页面缓存起来而不是销毁,在一定程度上可以提升性能
使用方式很简单,只需要用此组件将router-view包裹起来
<template>
<div class="about">
<h1>This is an about page</h1>
<h1>嵌套路由</h1>
<keep-alive>
<router-view>
</router-view></keep-alive>
</div>
</template>
在页面激活时会调用activated方法,页面被缓存时调用deactivated方法,用法和生命周期方法相同
原文地址:https://www.cnblogs.com/luffysk/p/15087126.html
- merge语句导致的ORA错误分析(r9笔记第67天)
- Go语言的单例模式(Singleton)
- DPDK 全面分析
- 关于Go语言中数组的参数传递问题
- 【深度学习系列】用PaddlePaddle进行车牌识别(一)
- GO语言-new()分配与构造和初始化结构
- Java基础-day05-超市收银系统案例题
- mongodb11天之屠龙宝刀(五)lbs地理位置检索:存储经纬度以及查询
- 【深度学习系列】关于PaddlePaddle的一些避“坑”技巧
- 【深度学习系列】PaddlePaddle可视化之VisualDL
- Java基础-day04-代码题
- 【深度学习系列】CNN模型的可视化
- mongodb11天之屠龙宝刀(六)mapreduce:mongodb中mapreduce原理与操作案例
- 真实场景的虚拟视点合成(View Synthsis)详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Go热门开源项目大全
- Python钉钉报警及Zabbix集成钉钉报警
- 无锁队列的实现
- Go 单元测试和性能测试
- 01 . etcd简介原理,应用场景及部署,简单使用
- GO 单例模式
- 关于本博客皮肤样式配置
- 03 . Go开发一个日志平台之Elasticsearch使用及kafka消费消息发送到Elasticsearch
- GO 匿名函数和闭包
- Nginx升级加固SSL/TLS协议信息泄露漏洞(CVE-2016-2183)和HTTP服务器的缺省banner漏洞
- GO中间件(Middleware )
- TomcatAJP文件包含漏洞及线上修复漏洞
- golang new和make的区别
- Magicodes.IE之导入导出筛选器
- 界面酷炫,功能强大!这款 Linux 性能实时监控工具超好用!老斯机搞它!