博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue相关
阅读量:5969 次
发布时间:2019-06-19

本文共 2599 字,大约阅读时间需要 8 分钟。

1、当页面路由发生跳转要想保持本页面的数据显示不变,应该在router-view上包裹keep-live标签,并且在相关路由下面添加meta字段

path: '/',            redirect: '/home',            name: 'home',            component: home,            meta: {                keepAlive: true            }

2、在启动vue-cli的项目时,如果切换路由会在端口号和文件名之间加一个#号,要想去除的话,要在router.js里面增加 mode字段,并将其值改为history即可去除。

http://localhost:8080/#/home增加之后变为:http://localhost:8080/home

3、控制路由高亮的样式类名叫做 linkActiveClass这个字段也是需要在router.js里面进行配置,通过配置不同的类名就可以利用这个类名进行路由高亮样式的控制。

整体的router.js大概可以这样写

import Vue from 'vue'import Router from 'vue-router'import home from '@/components/home'import shop from '@/components/shop'import my from '@/components/my'Vue.use(Router)const router = new Router({    mode: 'history',    // linkActiveClass: 'linkActive',    routes: [{            path: '/',            redirect: '/home',            name: 'home',            component: home,            meta: {                keepAlive: true            }        },        {            path: '/home',            component: home,            beforeEnter: (to, from, next) => {                // alert('hah')                next();            },            meta: {                keepAlive: true            }        }, {            path: '/shop',            name: 'shop',            component: shop,        }, {            path: '/my',            name: 'my',            component: my        }    ]})//全局守卫 在路由进入之前进行一些操作,例如判断是否登陆router.beforeEach((to, from, next) => {    next();})export default router;

4、引入axios 用npm i axios 安装完成之后在package.json里面会看到axios的版本号

"dependencies": { "axios": "^0.18.0", "vue": "^2.5.2", "vue-router": "^3.0.1"
然后在main.js里面引入axios
import axios from 'axios' Vue.prototype.axios = axios //将axios放入Vue方法里面,然后就可以运用axios,在各个组件里面通过this.axios.方法名就可以了 axios.defaults.baseURL ='设置的全局基础URL,这样在请求的url就可以接拼接后面的就可以了,这样方便更改试环境或者正式环境'

5、npm run build 之后打开dist文件夹下的index文件之后会显示报错信息

Failed to load resource: net::ERR_FILE_NOT_FOUND manifest.2ae2e69a05c33dfc65f8.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND vendor.c397231b51d1afea579a.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND app.cb5916c3a53968444905.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
在npm run build之后控制台也会在build complete之后会有提示
Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.
解决办法:
在config文件夹里面的index.js文件里面找到build这个对象里面的 assetsPublicPath: '/',将'/'换为'./';另外在bulid文件夹里面的build.js里面将console.log里面的打印消息隐藏或者删除就可以了。再次点击dist文件夹下的index.html文件已经不报错了,但是当你点击下面的跳转路由的时候会报找不到页面的错误,这是由于你没有启动服务大原因,这就要求你在本地启动一个服务然后再次点击就可以看到切换的效果了。
---

转载于:https://www.cnblogs.com/oxiaojiano/p/9139882.html

你可能感兴趣的文章
文件的读取流和书写流
查看>>
ASP.NET Core中的配置
查看>>
Django ORM 中的批量操作
查看>>
执行python文件报错SyntaxError: Non-ASCII character '\xe8' in file, but no encoding declared
查看>>
VMware Workstation Pro下载
查看>>
IOSday01 连线和程序标识
查看>>
Eclipse快捷键
查看>>
SpringMvc之集成Swagger
查看>>
URAL 1721 Two Sides of the Same Coin(二分图匹配,输出匹配对象)
查看>>
【转】iOS实时卡顿监控
查看>>
XCode中安装cocoapods步骤
查看>>
iOS 汉字转拼音
查看>>
动态矩阵控制 MATLAB代码
查看>>
《c程序设计语言》读书笔记-3.4-数字转字符串
查看>>
Pig的安装和简单使用
查看>>
三个获取浏览器URL中参数值的方法
查看>>
堆/密文/树
查看>>
CQOI2019(十二省联考)游记
查看>>
Linux安装gitbook
查看>>
Eclipse错误提示: Symbol 'xxxx' could not be resolved
查看>>