vue-router 프로젝트 실습(자세한 튜토리얼)

vue-router는 Vue.js의 공식 라우팅 라이브러리입니다. 이 글은 주로 vue-router 프로젝트의 실질적인 요약을 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

오늘은 vue.js의 3대 장군 중 하나인 vue에 대해 이야기해 보겠습니다. vue 프로젝트 {vue,vue-router,component} -라우터. 프런트엔드와 백엔드 분리를 위한 중요한 방식 중 하나인 라우터는 SPA 애플리케이션 간의 페이지 점프를 완료하는 데 도움이 됩니다.

그리고 axios와 같은 타사 라이브러리를 사용하면 백그라운드 인터페이스와 함께 작동하는 인터셉터 기능을 구현할 수 있습니다.

작은 프로젝트의 경우 라우터 폴더에 router.js가 포함되어 있으면 충분합니다.

그러나 페이지가 많으면 경로 및 구성 요소 정의, 다른 인스턴스화 구성 요소 및 마운트라는 두 파일을 분리해야 합니다. vue 인스턴스에 대한 경로입니다.

기본적인 사용법에 대해서는 자세히 다루지 않겠습니다. vue-router 공식 홈페이지에서 잘 읽어보시면 기본적인 사용법에는 문제가 없을 것입니다.

1. 왜 내 경로가 작동하지 않나요?

여기서 매우 중요한 점은 VueRouter 인스턴스를 구성할 때 전달되는 매개변수의 문제입니다.

import routes from '@/router/router'
const router = new VueRouter({
 routes // （ES6语法）相当于 routes: routes
})
new Vue({
 router
}).$mount('#app')

여기서 소개하는 내용이 루트가 아닌 경우에는 다음과 같이 작성하셔야 합니다.

import vRoutes from '@/router/router'
const router = new VueRouter({
 routes :vRoutes 
})
new Vue({
 router
}).$mount('#app')

2. 라우팅에서 webpack을 기반으로 구성요소의 지연 로딩을 구현합니다.

저희 vue 프로젝트에서는 기본적으로 지연 로딩이 없으면 패키지된 파일이 비정상적으로 커집니다. 홈페이지에 흰색 화면이 표시되고 심각한 지연이 발생하며 사용자 경험에 도움이 되지 않습니다. 지연 로딩을 사용하면 페이지가 분할될 수 있으며 webpack은 다양한 구성 요소를 여러 개의 작은 js 파일로 패키징합니다. 사용자 경험을 최적화해야 할 때 비동기식으로 로드합니다. 즉, 100명의 사용자 중 한두 명만 일부 페이지에 들어갈 수 있는데 왜 거기에 트래픽을 소비합니까?

import App from '@/App.vue'
const index = r => require.ensure([], () => r(require('@/pages/index/index')), 'index')
export default [{
 path: '/',
 component: App,
 children: [
  {
    path: '/index',
    name:'index',
    component: index
  }]
}]

구성 요소에 중첩된 경로가 포함된 경우 두 경로를 js 청크로 패키징할 수도 있습니다.

// 这两条路由被打包在相同的块中，访问任一路由都会延迟加载该路由组件
const orderUser= r => require.ensure([], () => r(require('@/pages/order/user')), 'order')
const payRecord= r => require.ensure([], () => r(require('@/pages/order/payRecord')), 'order')

3. 라우터 모드

브라우저의 경우 라우터는 두 가지 모드로 구분됩니다.

1.hash 모드(기본값)

uri의 기본 구조에 따르면 해시 모드는 기본 URI 조각으로 처리됩니다. SPA를 차치한다면, 보다 일반적인 적용 시나리오는 PC 쇼핑몰을 구축할 때 제품 세부 정보, 설명, 제품 매개변수와 같은 탭 전환이 있을 것이라는 것입니다. ID와 함께 a 태그를 사용하고, 움직임이 거의 없습니다. 특수 효과가 매우 좋습니다.

이것은 라우터가 기본적으로 사용하는 라우팅 방법이기도 합니다. 하지만 이 방법에는 단점이 있습니다. 즉, 제3자 결제에 연결할 때 제3자 결제에 대한 URL을 콜백 주소로 전달하지만, 결제가 완료된 후 일부 제3자 결제가 우리의 # 차단 기호로 첫 번째 기호 앞의 URL 내용만 유지되고 # 해당 콜백 매개변수는 나중에 추가됩니다. 이로 인해 결제 완료 후 해당 결제 페이지로 점프가 불가능합니다

수신 URL:

http://xx.xx.com/#/pay/123

콜백 후 주소:

http ://xx .xx.com/pay/123?data=xxxxx%xxxx

2. 히스토리 모드

히스토리 모드도 있습니다. h5의 History.pushState를 사용하여 URL 점프를 완료합니다. 점프를 처리하기 위해 이 방법을 사용할 때의 장점은 URL이 우리가 일반적으로 보는 것과 다르지 않다는 것입니다. 해시 모드와 비교하면 #이 없습니다. 그러나 히스토리 모드를 사용하는 경우에는 백그라운드에서 해당 처리도 수행해야 합니다. 왜냐하면 http://www.xxxx.com/user/id와 같은 주소에 직접 액세스하는 경우 백엔드가 구성되지 않은 경우 백엔드는 클라이언트가 404 페이지를 반환합니다.

4.router-link는 루프에 있습니다. 매개변수 이름 = undefine

b988a8fd72e5e0e42afffd18f951b277 구성요소는 뷰 레이어에서 사용해야 하는 점프 구성요소입니다. 이는 3499910bf9dac5ae3c52d5ede7383485 태그가 수행해야 하는 작업을 대체하며 더 많은 작업을 수행하는 데 도움이 됩니다.

h5 기록 모드이든 해시 모드이든 동작이 일관되므로 라우팅 모드를 전환하거나 해시 모드를 사용하기 위해 IE9로 다운그레이드하려는 경우 변경이 필요하지 않습니다.

HTML5 기록 모드에서 라우터 링크는 클릭 이벤트를 보호하여 브라우저가 페이지를 다시 로드하는 것을 방지합니다.

HTML5 히스토리 모드에서 기본 옵션을 사용하면 모든 to 속성을 작성할 필요가 없습니다(기본 경로).

그러나 v-for 루프에서 라우터 링크를 사용할 때 일반적으로 우리가 얻어야 하는 것은 정의된 item.xxx를 통해 얻을 수 있는 루프의 값입니다. 데이터에 정의한 값을 가져와야 하는 경우 this.foo를 통해 가져오나요? 아니면 foo를 통해 검색해야 합니까? 아니면 괜찮나요?

여기서는 this.foo를 통해 얻을 수 없습니다. 왜냐하면 여기서는 더 이상 vue의 인스턴스를 가리키지 않고 [object Window]를 가리키기 때문입니다. 따라서 this.foo를 사용하여 검색하면 실제로는 정의되지 않습니다.

 <router-link tag="li" :to="{path:`/user/${item.userID}`}" v-for="(item, index) in userList" :key="index">
   //含有固定的值
  <p>{{this.foo}}</p>
  <p>{{foo}}</p>
 </router-link>
data(){
  return {
    foo:&#39;bar&#39;,
  } 
}

4. axios와 함께 vue-router 사용

 初次接触拦截器这个概念是在java中，通过拦截器，我们可以对用户的登录状态进行更加粒度的操作。而对于一个SPA的应用来说，没有了后台路由的介入，我们就需要在前端实现一套自己的登录状态的管理机制。

最直观的一点就是，通过用户的token来判断用户是否登录？

router.beforeEach((to, from, next) => {
 const NOW = new Date().getTime();
 if (to.matched.some(r => r.meta.requireAuth)) {
  if(NOW > store.state.deadLine){
   store.commit('CLEAR_USERTOKEN')
  }
  if (store.state.message.login === true) {
   next();
  }
  else {
   next({
    path: '/login',
    query: {redirect: to.fullPath}
   })
  }
 }
 else {
  next();
 }
})

上面的代码中，我们通过vue-router中的全局守卫，在导航触发的时候大致做了如下几件事：

（1）判断导航的页面是否需要登录

（2）超过登录持久期限，清除持久化的登录用户token

（3）没有超过登录期限，判断是否登录状态

（4）没登录，重定向到登录页面

但是，仅仅这样是不够的。因为用户直接不正常注销而直接后台运行网页是很正常的事情，这就导致虽然token是存在的，但是对于后台而言，这个token是无效的，过期的了。所以，我们需要axios配合后台给出的状态码来完善我们的拦截器。

import router from '@/router/routes'
axios.interceptors.response.use(
 success => {
  switch (success .code) {
   case -100:
    router.replace({
     path: 'login',
     query: {redirect: router.currentRoute.fullPath}
    })
    console.warn('注意,登录已过期!')
    break;
  }
  return success;
 },
 error => {
   switch (error.code) {
    case 404:
     console.warn('请求地址有误或者参数错误!')
    break;
   }
  return Promise.reject(error.response.data)
 });

 通过后端给到的登录过期状态码，这里以-100为例，我们可以用axios的响应拦截器实现，当我们的token过期的时候，我们将页面重定向到登录页面去。

 5.巧用replace替换push

在项目中，我有的同事就是一直this.$router.push(...)，从开始push到结尾。

碰到有的页面，比如说，在选择地址的时候需要知道用户当前所在的城市，如果没有的话，就是重定向到城市列表页面去手动选取。选择完成以后再回到选择地址的页面，如果一直使用push的话，点击选择地址的后退时，就会回退到城市列表页。然后造成页面间的死循环。

这里如果使用replace来操作就没有什么问题了，问题就是我们不应该让城市列表页出现在我们的浏览历史里面。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在javascript中如何实现填充默认头像

JavaScript的6种正则表达式（详细教程）

react webpack打包后的文件（详细教程）

위 내용은 vue-router 프로젝트 실습(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!