vue 全局css 路由刷新后不生效

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 全局css 路由刷新后不生效相关的知识,希望对你有一定的参考价值。

在app.vue 的style中设置了一个 全局css, 如果在首页点进路由 那么这个css是生效的 但是刷新了路由页的时候 css则不生效了, 请问这个怎么解决呢

可能是因为浏览器缓存了样式文件导致。

可以在css文件引用的末尾随便加个请求参数,如:main.css?v=201804091834,浏览器就以为是个新文件,然后从服务器重新下载该文件。
参考技术A 请在路由页也设置CSS再看看

vue路由传参vue自带方法路由传参方式页面跳转带id过去刷新页面数据不丢失隐藏URL后的参数 详细教程

vue路由传参方式

项目中很多情况下都需要进行路由之间的传值,想过很多种方式

sessionstorage/localstorage/cookie 进行离线缓存存储也可以,用vuex也可以,不过有些大材小用吧,不管怎么说因场景而异

一、页面刷新数据会丢失

使用场景:
页面跳转带id过去

方法一:通过路由属性中的name来确定匹配的路由,通过params来传递参数

通过路由属性中的name来确定匹配的路由,通过params来传递参数

eg:点击当前页的某个按钮跳转到另外一个页面去,并将某个值带过去

<div class="examine" @click="insurance(2)">查看详情</div>
// 父组件传值:将id带过去
methods:{
  insurance(id) {
       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
  }
// 路由配置
{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }
// 子组件:获取参数id
this.$route.params.id

温馨提示:该方法刷新页面数据会丢失

*该方法可以隐藏URL后的参数



方法二:使用Vue全局API:Vue.observable

使用Vue全局API:Vue.observable

详细教程看如下博客:Vue.observable使用教程

温馨提示:该方法刷新页面数据会丢失

二、页面刷新数据不会丢失

方法一:使用动态路由传参,path中携带参数id,路由中使用 /:id 绑定对应参数

使用动态路由传参,path中携带参数id,路由中使用 /:id 绑定对应参数

methods:{
  insurance(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/particulars/${id}`,
        })
}
// 对应路由配置
{
    path: '/particulars/:id',
    name: 'particulars',
    component: particulars
}
// 子组件中获取参数
this.$route.params.id

温馨提示:该方法刷新页面数据不会丢失

方法二:使用path匹配路由,通过query传参

使用path匹配路由,通过query传参

url路径中携带:

methods:{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }
{
    path: '/particulars',
    name: 'particulars',
    component: particulars
}
// 子组件获取参数
this.$route.query.id

温馨提示:该方法刷新页面数据不会丢失

以上是关于vue 全局css 路由刷新后不生效的主要内容,如果未能解决你的问题,请参考以下文章

vue实现返回上一页面,页面停留在原来位置,不刷新

php文件更新后不生效?亲测有效!

vue在脚手架index.css中修改样式不生效

vue循环中添加路由跳转点击第一次不生效

如何让富文本里的css局部生效

配置路由时,children子路由不生效