广州网站建设:,鞍山便民网,网站权限怎么弄,建设银行洛阳市分行网站day-058-fifty-eight-20230426-vue-router路由
vue-router路由
路由#xff1a;切换页面#xff0c;单页面应用上使用的 hash模式—锚点
对应vue版本
如何使用路由版本 vue2 — router3vue3 — router4
使用vue-router 创建项目的时候#xff0c;直接选中路由…day-058-fifty-eight-20230426-vue-router路由
vue-router路由
路由切换页面单页面应用上使用的 hash模式—锚点
对应vue版本
如何使用路由版本 vue2 — router3vue3 — router4
使用vue-router 创建项目的时候直接选中路由 src目录下面多了一个router文件夹index.js上写好了基础模板 在main.js中导入挂载 import router from ./router
new Vue({router,render: h h(App)
}).$mount(#app)创建项目的时候没有选中路由 安装vue-router npm install vue-router3//vue2对应的vue-router版本3
//npm install vue-router4//vue3对应的vue-router版本4接下来自己在src目录下创建router文件夹 index.js 写基础模板 在main.js中导入挂载
路由配置属性
import Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter)
const router new VueRouter({//路由属性routes:[],// routes:routes//mode:history//mode:hash 默认是hash
})
export default router路由配置规则
import Vue from vue;
import VueRouter from vue-router;
import HomeView from ../views/HomeView.vue;
Vue.use(VueRouter);
// 路由配置规则
const routes [{path: /, //路由路径name: home, //命名路由//展示的组件页面--静态组件缓存component: HomeView, //展示的组件页面},{path: /about,name: about,//展示的组件页面--路由懒加载component: () import(/* webpackChunkName: about */ ../views/AboutView.vue),//注释的含义在打包时定义的webpack区块chunk的名称。同一个名称的在打包时会打包到一起共用一块},{path: /InfoView,name: InfoView,component: () import(/* webpackChunkName: InfoView */ ../views/InfoView.vue),},
];
const router new VueRouter({// 路由配置属性routes,// mode: history,//历史模式// mode:hash,//默认是hash
});
// vue路由实例对象
console.log(router--, router);
export default router;路由页面展示
templatediv idappnavrouter-link to/路径一//router-link |router-link to/about?nameliliage18路径二/about/router-link |router-link :to{ name: InfoView }路径三直接到InfoView对应的路径/router-link/navrouter-view //div
/templaterouter-link标签相当于a标签 to属性相当于src , to属性的值就是路由规则的path值。tag属性 可以将router-link标签在编译时不默认转为a标签而转成对应的标签。 如tagspan转成span标签。 router-link to/about tagspanAbout/router-link 命名路由可以通过命名路由名称跳转页面。 router-link :to{ name: InfoView }路径三直接到InfoView对应的路径/router-link [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygTc1Q8p-1682524495861)(./router-link标签与vue路径实例对象与router-view标签的联系.png)]
vue路由传参
在路由规则中定义参数动态路由 为什么要传参 因为如果一个vue页面不通过传参那么页面的初始化可控数据就是固定的也就是说用户只能看到一个页面。 而如果有其它的可控初始化数据那么vue组件就可以在生命周期中通过接口向后台中请求对应的数据进而让页面显示出不同的内容。
vue路由传参的类型
query 问号传参 命名路由传参 都是显式传参(刷新页面数据不消失) templaterouter-link to/about?nameliliage18About/router-link
/template组件页面接收参数 templateh3{{ $route.query.name }}/h3
/template不用修改路由配置信息 params 隐式传参(刷新页面数据消失) 通过命名路由方式传参 不需要修改路由配置信息 显式传参 必须修改路由配置信息 必须修改路由配置信息 import Vue from vue;
import VueRouter from vue-router;
Vue.use(VueRouter);
// 路由配置规则
const routes [{path: /ParamsShowView,name: ParamsShowView,component: () import(../views/ParamsShowView.vue),},
];const router new VueRouter({routes,
});
export default router;import Vue from vue;
import VueRouter from vue-router;
Vue.use(VueRouter);
// 路由配置规则
const routes [{path: /ParamsShowView/:name/:age,//由/ParamsShowView改为/ParamsShowView/:name/:agename: ParamsShowView,component: () import(../views/ParamsShowView.vue),},
];const router new VueRouter({routes,
});
export default router;显式传参(刷新页面数据不消失) templaterouter-link to/ParamsShowView/fang/25ParamsShowView/router-link
/template组件页面接收参数 templatediv{{ $route.params }}/div
/templateprops 简化 params 传参的时候接收参数 router-link to/info/lisa/28Info/router-link{path: /info/:name/:age,name: Info,component: Info,props:true
}组件接收 templatediv{{ name }}---{{ age }}/div
/template
script
export default {props:[name,age]
}
/script直接 {path: /my,name: My,//路由懒加载component: () import(/*webpackChunkName: about*/ ../views/My.vue),props:{ sidebar: false }
}templatedivMY---{{ sidebar }}/div
/template
script
export default {props:[sidebar]
}
/script路由重定向 {//路由重定向--访问 / 页面,都 /homepath:/,redirect:/home},{//路由重定向--访问任何没有的页面,都page404path:*,redirect:/page404},路由高亮显示
路由别名
{path: /home,//路由路径name: Home,//命名路由component: Home,//展示的组件页面alias:/h
},路由模式
hash 哈希模式history 历史模式abstract 后端路由—修改网址路径没用vue中并没有用
const router new VueRouter({//路由属性routes,// routes:routes// mode: history,//历史模式mode:hash,//默认是hash// mode:abstract//后端路由---修改网址路径没用vue中并没有用
})hash哈希模式与history历史模式的区别
哈希模式哈希路由 是监控浏览器哈希值的变化历史模式浏览器browser路由 是监控浏览器路径的变化,—服务器必须配合否则404 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法来监控
history历史模式的缺陷
通过history api我们丢掉了丑陋的#但是它也有个问题不怕前进不怕后退就怕刷新f5如果后端没有准备的话, 因为刷新是实实在在地去请求服务器的。 在hash模式下前端路由修改的是#中的信息而浏览器请求时不会将 # 后面的数据发送到后台所以没有问题。但是在history下你可以自由的修改path当刷新时如果服务器中没有相应的响应或者资源则会刷新出来404页面。
二级路由
在router-view标签中显示变换出来的vue页面组件中又使用了router-view标签。
{path: /info,name: Info,//路由懒加载component: () import(/* webpackChunkName: about */ ../views/Info.vue),props:true,//redirect:/info/infoa,//二级路由重定向--1//二级路由children:[//path:/infoa----to/infoa//path:/info/infoa----to/info/infoa//path:infoa----to/info/infoa{//二级路由重定向--2path:/info,redirect:infoa},{path:infoa,name:Infoa,component: () import(/* webpackChunkName: about */ ../views/Info/InfoA.vue),},{path:infob,name:Infob,component: () import(/* webpackChunkName: about */ ../views/Info/InfoB.vue),}]
},页面结构 根目录无路由层级必定显示。 templatediv idapprouter-link toInfoViewInfoView/router-linkrouter-view //div
/template一级路由层级页面#号后面必须要对应。 templatedivh1InfoView/h1router-link to/InfoView/InfoViewA/InfoView/InfoViewA/router-link | router-link to/InfoView/InfoViewB/InfoView/InfoViewB/router-linkrouter-view/router-view/div
/template二级路由层级页面依附于一级路由展示在一级路由中的router-view标签区域内。 templatedivInfoViewA/div
/templatetemplatedivInfoViewB/div
/template路由高亮
实际上就是css样式设置路由切换时router-link标签由vue渲染成的DOM中会添加上动态的类名。 高亮的非精准匹配 /info/infna ---- /info与/info/infna .router-link-active{background-color: red;
}高亮的精准匹配 /info/infna ---- /info/infna (只匹配当前路径触发的元素) .router-link-exact-active {background-color: yellow;
}高亮换名称
const router new VueRouter({//路由属性routes,// routes:routeslinkActiveClass: myactive,linkExactActiveClass: exact-router
})$route路由信息对象
$route 路由信息对象 $route.path 字符串对应当前路由的路径总是解析为绝对路径如 “/foo/bar”。 $route.params 一个 key/value 对象包含了 动态片段 和 全匹配片段如果没有路由参数就是一个空对象。 $route.query 一个 key/value 对象表示 URL 查询参数。例如对于路径 /foo?user1则有 $route.query.user 1如果没有查询参数则是个空对象。 $route.hash 当前路由的 hash 值 (不带 #) 如果没有 hash 值则为空字符串。锚点 $route.fullPath 完成解析后的 URL包含查询参数和 hash 的完整路径。 $route.matched 数组包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。 $route.name 当前路径名字$route.meta 路由元信息
$router路由实例对象
$router表示路由的实例对象是路由配置生成的路由实例对象一开始导出后就被挂载到vue对象上了。
动态修改路由表的方法 addRoute/addRoutes(淘汰) 添加路由 getRoutes获取路由表中的所有路由 数组 removeRoute删除路由 router.removeRoute(My) //My是路由名称hasRoute:判断是否具有某个路由
动态添加一个路由
动态生成路由表一般由$router.addRoute()调用。 addRoute/addRoutes(淘汰) 添加路由 addRoutes() 2023年已经被废弃了。 router.addRoute({path:/onepage,name:OnePage,component: () import(/* webpackChunkName: about */ ../views/OnePage.vue)
})getRoutes获取路由表中的所有路由* 数组
路由页面跳转的方法
push(XXX) 去某个页面,有历史记录replace(XXX) 去某个页面,没有历史记录back() 返回上一个页面forward() 下一个页面go(0) 刷新go(1) 下一个页面 go(5) 下五个页面go(-1) 上一个页面 go(-7) 上一个页面
//this.$router.replace(/about);
this.$router.push({name:About,query:{name:fang,age:29}
});导航守卫
全局守卫路由配置中的路由独享守卫组件内的守卫
导航解析流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edNCFpVz-1682524495862)(./路由钩子解析流程.png)]
导航被触发。在失活的组件里调用 beforeRouteLeave 守卫。调用全局的 beforeEach 守卫。在重用的组件里调用 beforeRouteUpdate 守卫 (2.2)。在路由配置里调用 beforeEnter。解析异步路由组件。在被激活的组件里调用 beforeRouteEnter。调用全局的 beforeResolve 守卫 (2.5)。导航被确认。调用全局的 afterEach 钩子。触发 DOM 更新。调用 beforeRouteEnter 守卫中传给 next 的回调函数创建好的组件实例会作为回调函数的参数传入。
进阶参考
vue2对应的Vue Router3官网vue 基于abstract 路由模式 实现页面内嵌
