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 路由刷新后不生效的主要内容,如果未能解决你的问题,请参考以下文章