本文介绍: 很多情况下,用户希望查看详情页以后,返回列表页刚刚浏览位置,但由于列表组件已经被销毁,所以我们重新返回列表页后页面会置顶,就需要重新下拉查看列表,这样就做了很多没有必要的操作。如果整个单页应用服务在 /app/ 下,然后 base应该设为 “/app/”,所有的请求都会在url之后加上/app/也可以使用如下两种方案(更推荐使用scrollBehavior方案

base

基本路由请求路径

如果整个单页应用服务在 /app/ 下,然后 base应该设为 “/app/”,所有的请求都会在url之后加上/app/

new VueRouter({
    base: '/app/',
    ...
  });

mode

设置路由工作模式hashhistory

hash

http:/8000/#/hello

history

http:/8000/hello

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

属性设置匹配路由地址path路由组件component

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&gt;, // 路由别名
        children: Array<RouteConfig&gt;, // 嵌套路由
        beforeEnter: (to: Route, from: Route, next: Function) =&gt; 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进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注