vue-router 라우팅 및 페이지 간 탐색에 대한 자세한 설명

vue-router는 Vue.js의 공식 라우팅 플러그인으로 vue.js와 긴밀하게 통합되어 있으며 단일 페이지 애플리케이션을 구축하는 데 적합합니다. Vue의 단일 페이지 애플리케이션은 라우팅 및 구성 요소를 기반으로 합니다. 라우팅은 액세스 경로를 설정하고 경로 및 구성 요소를 매핑하는 데 사용됩니다. 기존 페이지 애플리케이션은 일부 하이퍼링크를 사용하여 페이지 전환 및 점프를 수행합니다. vue-router 단일 페이지 애플리케이션에서는 경로 간 전환, 즉 구성 요소 전환이 수행됩니다.

vue-router

우리는 라우팅이 일련의 액세스된 주소 규칙을 정의한다는 것을 알고 있습니다. 라우팅 엔진은 이러한 규칙 일치를 기반으로 해당 처리 페이지를 찾은 다음 처리를 위해 요청을 페이지로 전달합니다. 모든 백엔드 개발이 이 작업을 수행한다고 할 수 있지만 프런트엔드 라우팅에는 "요청"이라는 것이 없습니다.

프런트엔드 라우팅은 주소가 일치하는 구성요소나 객체를 찾아서 렌더링하는 것입니다. 서버에 요청을 보내지 않고 브라우저 주소를 변경하는 방법은 두 가지가 있습니다.

하나는 브라우저를 속이기 위해 주소에 #을 추가하는 것입니다. URL 해시를 사용하여 전체 URL을 시뮬레이션하는 HTML5의 window.history 함수입니다.

vue-router는 공식적으로 제공되는 전용 라우팅 도구 라이브러리 세트입니다. 이는 vue.use()를 통해 전역 참조에 도입해야 합니다. -cli가 프로젝트를 생성한 후 vue를 사용합니다(vue-router는 init 초기화 중에 y를 확인합니다)

먼저 프로젝트 src의 구조를 살펴보고 cmd를 통해 프로젝트 src 디렉토리에 들어가서 tree -f &gt를 실행합니다. ; list.txt code> 구조 트리 생성(list.txt에 저장됨): <img alt="" src="https://img.php.cn/upload/article/000/054/025/d732a2952052455432a7011127e7cf86-0.png">

src
├─assets // 静态资源
│ └─image // 图片
│  
├─components // 组件 
│ └─HelloWorld
│  HelloWorld.vue
│  
└─router // 路由配置
│ └─index.js
│ 
│ App.vue // 默认程序入口
│ main.js
│

tree -f > list.txt 生成结构树（保存在list.txt中）：

结构如下：

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router, 
 render: h => h(App)　
})

1、打开main.js:

import Vue from 'vue'
import Router from 'vue-router'
import Singer from '@/components/rank/rank'
Vue.use(Router) // 注册router
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Hello',
 component: MHeader // 路由中指定组件
 },
 {
 path: '/rank',
 name: 'rank',
 component: Rank
 }
 ]
})

第10行将配置的路由绑定到vue实例上，第11行在vue实例中使用render方法来绘制这个vue组件(App)完成初始化

Render是vue2新增的具有特色的方法，为了得到更好的运行速度，vue2也采用的类似react的Virtual Dom（虚拟Dom）

2、然后我们在components中注册几个组件

3、打开router/index.js配置路由

 routers：[{
 name:'BookDetails',
 path:'books/:id',
 component:BookDetails 
 }]

路由的模式

关键词："mode"，"history模式"，"hash模式"，"Abstract模式"

我们可以在创建的Router中使用模式，如参数mode:history的参数，这个值意思是使用history1. :

 <router-link :to="{ name:&#39;BookDetails&#39;，params:{ id:1 } }">
  //...
 </router-link>

Render는 vue2의 새로운 기능입니다. 더 나은 실행 속도를 얻기 위해 vue2는 반응형 가상 돔도 사용하는 독특한 방법입니다

• 
  

   export default {
   created () {
    const bookID = this.$router.params.id
   }
   }

  로그인 후 복사

  로그인 후 복사

• routing mode

• 키워드: "모드", "기록 모드", "해시 모드", "추상 모드 "

기록 모드를 사용하지 않는 경우 경로는 순위에 액세스할 때 http://localhost/#rank이 됩니다.

http://localhost/rank

• Hash: URL 해시 값을 라우팅으로 사용합니다.

• History: 의존합니다. HTML5 History API 및 서버 구성

Routing and Navigation

vue -router 제공 두 개의 명령 태그 구성 요소가 이 탐색 및 자동 렌더링 논리를 처리합니다.

- 경로와 일치하는 구성 요소 보기를 렌더링합니다.

라우팅 기능 적용 시

 routers：[{
 name:'BookDetails',
 path:'books/:id',
 component:BookDetails 
 }]

 <router-link :to="{ name:&#39;BookDetails&#39;，params:{ id:1 } }">
  //...
 </router-link>

 export default {
 created () {
  const bookID = this.$router.params.id
 }
 }

routers:[
 { 
  name:'Main',
  path:'/',
  component:Main,
  children:[
  { name:'Home',path:'home',component:Home }
  { name:'Me',path:'me',component:Me }
  ] 
 },
 { name:'BookDetail',path:'/books/:id',component:BookDetail } 
]

 routes: [
 { path: '/a', redirect: '/b' }
 ]
// 重定向的目标也可以是一个命名的路由
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]

 routes: [
 { path: '/a', component: A, alias: '/b' }
 ]