vue-router

vue-router 是 vue 官方提供的一套 路由插件,能够帮我们实现单页面应用。

单页面应用

  1. 什么是单页面应用(Single Page Application | SPA)
    整个项目只有一个 html 文件的,然后页面的跳转不会刷新页面的,就是单页面应用
  2. 什么是多页面应用
    项目中有多个 html 文件的,页面之间的跳转是通过 a 标签或者 location.href 的方式,

页面跳转会刷新浏览器,就是多页面应用

  1. 为什么现在会使用单页面应用呢
    为了使 h5 网站像原生 app 贴近,比如实现页面的转场动画。这时就出现了单页面应用。

vue 项目中 vue-router 的使用

  1. 安装(避免项目名字跟安装的东西重名)
npm install --save vue-router
  1. 在页面的某个位置选择一个坑,用来切换路由页面

<router-view></router-view>

  1. 在 src 下面创建一个 router.js 文件。这个文件中去实例化 vue-router 的实例对象,并配置上路由的规则。
  2. 需要在 main.js 中,new Vue() 的地方,配置一个 router 选项,选项的值,就是第 3 步中暴露出来的路由的实例

嵌套路由

path: '/',
  component: Home,
  children: [
    {
      path: 'films/nowPlaying',
      component: Films
    },
  ]

动态路由匹配

const router = new VueRouter({
routes: [

// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }

]
})

404页面

{
      path: '*',
      // component: Page404 // 404
      redirect: '/films/nowPlaying'
    }

详情页会出现的问题

当从a商品的详情页面直接进入了b商品的详情页面,会发现页面数据没有更新的问题。

原因是 Vue 把当前的详情页面路由页面组件给缓存了,也就是这个详情组件没有销毁,也就不会重新创建

解决这个问题的方法有两个:

  1. 监听 $route 是否有变化
  2. .... (使用一个路由钩子函数)

编程式导航

用 js 的方式来实现跳转,而不是 router-link

需要用到的是 $router (路由实例对象)。它身上有一些方法

  • $router.push() 普通 router-link 的跳转
  • $router.replace() 重定向跳转
  • $router.back() 后退
  • $router.forward() 前进
  • $router.go() 前进或后退 go(-1)

$route

当我们在vue项目中使用了 vue-router 。这时,当前项目的每一个vue组件,都会自动获取到一个 $route 数据。这个数据中存放的是匹配当前路由的信息对象。

可以通过它,得到当前的动态路由参数 Params 或 查询参数 Query 。

README-hash与history的区别

  1. url地址表现不同,hash有#号,history 没有
  2. 实现原理不同,hash的原理是通过监听onhashchange事件。
    history原理是基于html5中新增的history相关的api来实现的,hisotry.push() history.replace() window.onpopstate
  3. 上线之后的表现不同,hash不会有问题,而history可能会出现404的问题,需要服务端那边做配置处理

axios

  1. axios.get(url, config)
  2. axios.post(url, data, config)
  3. axios(config)

返回的是一个Promise对象
.then 里面接受到的 res 。并不是后台响应的数据,而是 axios 封装过的数据,包含有请求与响应信息等。res 中的 data 才是后台给我们的数据

通过 正向代理 请求数据

借助与后端与后端之间不会跨域的点。
自己实现一个后端代码
localhost:8080 -> localhost:3000/migu -> 目标网址
直接配置 vue.config.js 中的 proxy 代理

Last modification:December 26th, 2019 at 08:58 am
如果觉得我的文章对你有用,请随意赞赏