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 http://localhost:8080/#/home增加之后变为:http://localhost:8080/home
3, 控制路由高亮的样式类名叫做 linkActiveClass 这个字段也是需要在 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