本文介绍: 很多情况下,用户希望查看详情页以后,返回列表页刚刚浏览的位置,但由于列表页组件已经被销毁,所以我们重新返回到列表页后页面会置顶,就需要重新下拉查看列表,这样就做了很多没有必要的操作。如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 “/app/”,所有的请求都会在url之后加上/app/也可以使用如下两种方案(更推荐使用scrollBehavior方案)
base
如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 “/app/”,所有的请求都会在url之后加上/app/
new VueRouter({
base: '/app/',
...
});
mode
hash
- Vue–router 默认使用 hash 模式,使用 hash 模式时 url 中始终有 # 号。
- 不会刷新页面,也不会发起新的 HTTP 请求,只是实现客户端页面的定位
- #后面的字符不会被发送到服务器端,# 可以修改浏览器的访问历史记录。
- hash 模式是通过改变锚点(#)来更新页面 url,并不会触发页面重新加载。
- 通过window.onhashchange() 监听到hash 的改变,从而处理路由。
history
- 使用 history 模式时URL中不带 # 号。
- 利用 history.pushState 和 history.replaceState API 来完成 URL 跳转而无须重新加载页面。
- 刷新会请求服务器,如果服务器中没有相应的响应或者资源,则会刷新出来404页面
history模式下可能会遇到的问题及解决方案
//前端设置
module.exports = {
// publicPath默认值是'/',即你的应用是被部署在一个域名的根路径上
// 设置为'./',可以避免打包后的静态页面空白
// 当在非本地环境时,这里以项目test为例,即打包后的h5项目部署服务器的test目录下
// 那么这里就要把publicPath设置为/test/,表示所有的静态资源都在/test/里
// 打包部署后,会发现index.html引用的静态资源都添加了路径/test/
publicPath: process.env.NODE_ENV == 'development' ? './' : '/test/',
......
}
///服务端设置
location /test{
...
try_files $uri $uri/ /test/index.html
//location /test表示项目部署在了 /test目录下,这里要跟vue.config.js里的publicpath的值保持一致。
之所以刷新页面白屏,其实是因为路由资源不存在
}
routes
new Router({
...
routes: [
{
path: '/',
component: () => import('.iews/Index'),
name: "home",
children: [
{ path: '/home', name: "home", meta: { title: '管理' }, component: () => import('.src/home/Index') },
]
},
{
path: string,//路由路径
component: Component, // 当前路由匹配时显示的路由组件
name: string, // 命名路由
redirect: string | Location | Function, // 路由重定向
props: boolean | Object | Function, //路由传参
alias: string | Array<string>, // 路由别名
children: Array<RouteConfig>, // 嵌套路由
beforeEnter: (to: Route, from: Route, next: Function) => void, //路由守卫
caseSensitive: boolean, // 匹配规则是否大小写敏感?(默认值:false)
}
}
]
})
props配置(最佳方案)
{ // 二级路由
path: 'message',
component: Message,
children: [
{ // 三级路由
name: 'detail',
path: 'details/:id/:title/:desc', // 配置占位符
component: Details,
props(route){ // router每次调的时候会把 $route 传进来,你想怎么取就怎么取!
return {
id: route.params.id,
title: route.params.title,
desc: route.params.desc
}
}
// es6解构赋值写法更简单
//props({query: {id, title, desc}}){
// return {id, title, desc}
//}
}
]
}
scrollBehavior
很多情况下,用户希望查看详情页以后,返回列表页刚刚浏览的位置,但由于列表页组件已经被销毁,所以我们重新返回到列表页后页面会置顶,就需要重新下拉查看列表,这样就做了很多没有必要的操作。
new VueRouter({
...
scrollBehavior() {
return { x: 0, y: 0 };
},
});
也可以使用如下两种方案(更推荐使用scrollBehavior方案)
//在页面离开时记录滚动位置
beforeRouteLeave (to, from, next) {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
next()
},
//进入该页面时,用之前保存的滚动位置赋值
beforeRouteEnter (to, from, next) {
next(vm => {
document.body.scrollTop = vm.scrollTop
})
},
//App.vue
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
//router.js
routes: [
{
path: '/',
name: 'List',
component: () => import('./list.vue'),
meta: {
keepAlive: true // 需要缓存
}
},
{
path: '/content/:contentId',
name: 'content',
component: () => import('./content.vue'),
meta: {
keepAlive: false // 不需要缓存
}
},
]
原文地址:https://blog.csdn.net/weixin_43787651/article/details/134682378
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_32972.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。