vue 라우터: 동적 경로 일치 동적 경로 일치
- 不言원래의
- 2018-07-09 13:50:302122검색
이 글에서는 주로 Vue 라우터: 동적 경로 매칭에 대해 소개합니다. 이제 특정 참조 값을 가지고 있으므로 도움이 필요한 친구들이 참고할 수 있습니다.
최근 여러 Vue 단일 페이지 애플리케이션은 다중 페이지 애플리케이션으로 병합 및 업그레이드되어 코드 중복 및 반복 패키징을 줄입니다. 원래 Django 구조와 Vue-cli 구성에 포함되어 있으므로 Django에 맞춰 많은 구성 변경이 이루어집니다. 보편적으로 이식 가능하지 않으며 참고용으로만 사용됩니다.
구덩이가 천천히 채워질 테니 라우팅부터 시작하겠습니다. 주요 아이디어는 하나의 입구가 단일 페이지 응용 프로그램에 해당한다는 것입니다. 각 단일 페이지 응용 프로그램은 독립적이며 서로 간에 라우팅 점프가 없습니다. 단일 페이지 응용 프로그램에서는 여러 구성 요소 간에 라우팅 점프가 있으므로 각 단일 페이지 응용 프로그램은 서로 다릅니다. -page application 페이지 애플리케이션에는 자체 라우팅 구성이 있습니다.
동적 경로 매칭은 특정 패턴과 일치하는 모든 경로를 동일한 구성 요소에 매핑하는 것입니다.
예를 들어 공식 문서에 제공된 예에 따르면 모든 요청의 기본 정보가 포함된 RequestList 구성 요소가 있습니다. 요청의 ID를 클릭하면 해당 요청의 세부 정보를 볼 수 있습니다. 요청. 다른 ID의 경우 모든 요청은 RequestDetail 구성 요소를 사용하여 렌더링될 수 있으며 "동적 경로 매개 변수(동적 세그먼트)"를 통해 효과를 얻을 수 있습니다.
이렇게 하면 /demo/request/1 및 /demo/request/2가 동일한 경로에 매핑됩니다. 매개변수가 구성 요소에 전달됩니다. this.$route.params가 전달될 수 있는 경로를 통해 RequestDetail은 전달된 매개변수에 액세스합니다. 매개변수는 하나일 수도 있고 여러 개일 수도 있습니다. /demo/request/1 和、/demo/request/2都会映射到相同的路由，参数通过路由传递给组件RequestDetail，可通过this.$route.params访问到传递来的参数，参数可能是一个，也可能是多个。
import RequestList from '@/components/RequestList';
import RequestDetail from '@/components/RequestDetail';
export default {
base: '/demo/',
mode: 'history',
linkActiveClass: 'active',
routes: [
{
path: '/',
name: 'requestList',
component: RequestList,
},
{
path: '/request/:requestId',
name: 'requestDetail',
component: RequestDetail,
props: props, //路由传参
},
],
};
有时候也可以配置成带查询参数的路由，但个人觉得这样的路由/demo/request?requestId=1长得不是很美观，而且把参数暴露给用户了。
{
path: '/request',
name: 'requestDetail',
component: RequestDetail,
props: route => ({ requestId: route.query.requestId }), //路由传参
},
这周在多页面应用中加了一个新的单页面应用，配置了动态路由，在dev开发模式下却只能匹配到根路由/，一直cannot get子路由，什么都渲染不出来。开始也没有找到合适的关键词去搜索相关issue,折腾了大半天终于发现有人也遇到了同样的问题why-does-vue-router-webpack-dev-server-shows-cannot-get-path-on-page-refresh。
It turns out it was a bug in the Vue webpack template on Windows
Ok, fine :)
其实这个Bug在现在的Vue webpack template里已经解决了，在webpack.dev.conf.js的devServer 配置中有historyApiFallback. 当我们使用HTML5 History API的时候，index.html会在404找不到资源的时候被返回，这里的index.html是什么?
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
在dev开发模式下，其实是相当于在本地起了一台虚拟的服务器，一个单页面应用对应一个html模板文件，入口对应的所有相关组件的js css代码都会被注入到这个html模板文件里，所以我们的路由配置也需要到相应的模板文件里的js代码去解析、匹配。但是由于我的多页面应用配置，当我在地址栏输入/demo/request/1
devServer: {
historyApiFallback: {
rewrites: [
{ from: /^\/demo/, to: path.posix.join(config.dev.assetsPublicPath, 'demo/index.html') },
{ from: /^\/test/, to: path.posix.join(config.dev.assetsPublicPath, 'test/index.html') },
],
},
}때때로 쿼리 매개변수를 사용하여 경로로 구성할 수도 있지만, 개인적으로 그런 경로 /demo/request?requestId=1는 별로 아름답지 않다고 생각하는데, 매개변수가 사용자에게 노출됩니다. rrreee
이번 주에는 다중 페이지 애플리케이션에 새로운 단일 페이지 애플리케이션을 추가하고dev 개발 모드에서는 루트 경로만 일치할 수 있도록 구성했습니다. /, 항상 하위 경로를 가져올 수 없습니다. 아무것도 렌더링할 수 없습니다. 처음에는 관련 문제를 검색하기에 적합한 키워드를 찾지 못하여 오랫동안 고생한 끝에 마침내 누군가가 왜-does-vue-router-webpack-dev-server-shows-와 동일한 문제에 직면했는지 발견했습니다. 페이지를 새로 고칠 때 경로를 얻을 수 없습니다.
Windows의 Vue 웹팩 템플릿에 있는 버그인 것으로 나타났습니다. #사실 이 버그는 현재 Vue 웹팩 템플릿에 해결되었습니다. historyApiFallback <code>webpack.dev.conf.js의 devServer 구성에 있는 HTML5 History API를 사용하면 404 리소스를 찾을 수 없을 때 index.html이 반환됩니다. # 🎜🎜#rrreee
/demo/request/1를 입력하면 일치하는 리소스를 찾을 수 없고 해당 html 템플릿 파일로 돌아가야 합니다. 이는 개발 구성의 템플릿 파일 경로와도 관련이 있습니다. rrreee
많은 프런트엔드 신규 사용자는 Vue를 처음 접할 때 Vue-cli를 사용하여 프로젝트를 빌드할 것입니다. 템플릿 구성은 어느 정도 구성 가능하며 완료됩니다. 일반적인 단일 페이지 애플리케이션의 요구 사항을 충족하기에 충분하므로 실제로 문제가 발생하지 않습니다. 그러나 프런트 엔드는 더 이상 코드에만 초점을 맞추는 것이 아니라 전체 프로젝트 아키텍처의 설계에도 중점을 둡니다. 좋은 구조는 전투의 절반에 해당하며 후속 개발 프로세스는 매우 원활합니다.프론트엔드는 일반인이 상상하는 것만큼 단순하지는 않지만, 그다지 복잡하지는 않습니다. 저는 코드 포터가 아닌 프론트엔드 아키텍트로 자리매김하고 있습니다. 그러므로 프론트엔드에 깊이 들어가고 싶은 모든 사람은 Vue-cli의 Webpack 구성을 해석하고 정리한 다음(React의 경우에도 마찬가지) Webpack 문서를 완전히 살펴보는 것이 좋습니다. 기본적으로 프론트엔드 엔지니어링 코드 분할(Code Splitting)을 나누어서 Lazy Loading을 대부분 이해하고, 구성을 작성하고 아키텍처를 직접 설계해 보려고 합니다.
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
위 내용은 vue 라우터: 동적 경로 일치 동적 경로 일치의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!