SPA
单页面应用
只有一个页面(一个html文件)
vue-router
组件之间的切换(hash地址与组件间的关系)–前端路由
vue版本与路由版本的对应关系
vue2->router@3
vue3->router@4
入门
用vue脚手架创建只有babel组件的vue项目
进入项目
//安装路由
npm i vue-router@3.5.2
目录结构
1.创建pages文件夹,文件夹内创建一级路由
Home.vue
About.vue
Product.vue (声明式导航)
2.在pages文件夹内创建products文件夹作为保存一级路由porduct的子路由(二级路由)页面,并在该文件夹内创建二级路由页面
huawei.vue
xiaomi.vue
3.在src文件夹下创建router文件夹,并在该文件夹内创建index.js,作为路由文件
4.在入口文件内挂载路由
5.在App.vue内引用路由
脚手架创建路由
选择路由是否为history模式
路由懒加载
/router/index.js (路由文件)
@路径指示符修改
jsconfig.json
前置路由守卫
监听路由跳转,对路由跳转前进行操作(拦截或者允许跳转)可以与token连用。
/router/index.js (路由文件)
meta为固定字段,不能随便命名
后置路由守卫
跳转后对页面进行操作(改变某个板块字体样式等等)
/router/index.js (路由文件)
路由跳转与回退
路由跳转分两种模式$router.push(路由)与$router.replace(路由)
push方法记录了浏览器读取路由的历史,能通过回退前进等操作读取上一次所使用过的路由。
视图命名
一个组件如果同时存在多个视图,该如何分辨对应子组件渲染到对应视图上呢?
路由文件
组件
需要注意:子组件需要设置name,比如下面的组件就为NavAboutView.vue 文件的内容
缓存路由组件
路由文件
组件
navs1组件
navs2组件
以上,如果路由上组件设置了name,那组件文件可以不用设置name,反之亦然,不过总而言之,不过name设置在哪里,组件对应的name不可或缺
当然,我们也可以设置路由的meta.keepAlive字段来设定当前组件是否被缓存
以下是只有navs1被缓存
路由发送数据
路由
query Url形式
组件发送数据
组件接收数据
query 对象形式
组件发送数据
组件接收数据
路由
params Url形式
组件发送数据
组件接收数据
params 对象形式
组件发送数据
组件接收数据