이 글은 Vue-Router 라우팅 기본에 대한 자세한 설명을 중심으로 관련 정보를 소개합니다. 이 글이 이 부분을 이해하고 익히는 데 도움이 되기를 바랍니다.
vue-router 라우팅 기본 상세 설명
오늘은 vue-route의 기본과 vue에서 공식적으로 추천하는 루트를 정리해보았습니다.
1. 시작
HTML
<p id="myp">
<h1>简单路由</h1>
<router-link to="/foo">Go to foo</router-link>
<router-link to="/bar">Go to bar</router-link>
// 渲染出口
<router-view></router-view>
</p>
로그인 후 복사
템플릿(컴포넌트) 생성:
(가져오기를 사용하여 외부 컴포넌트를 도입할 수도 있습니다)
var foo={template:"<p>我是foo 组件</p>"};
var bar={template:"<p>我是bar 组件</p>"};로그인 후 복사
컴포넌트 주입 라우팅:
var routes = [
{path:'/foo',component:foo},
{path:'/bar',component:b ar},
];로그인 후 복사
라우팅 인스턴스 만들기:
// 这里还可以传入其他配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes;
});로그인 후 복사
여기 경로에는 'r'이 없다는 점에 유의하세요(라우터로 쓰지 마세요)
vue 인스턴스 만들기(그리고 인스턴스 마운트)
var routerVue = new Vue({
router
}).$mount("#myp");로그인 후 복사
2. 동적 경로 매칭
때때로 필요한 것은 동일한 템플릿 구조이지만 그때그때의 데이터가 다릅니다. 이는 로그인한 ID가 다른 사용자를 동일한 페이지에 연결하는 것과 같지만, 각 사용자에 대한 독립적인 정보를 표시하는 것이 바로 동적 경로 일치를 사용하는 것입니다.
동적 라우팅은 주로 전역 $route.params와 경로의 동적 매개변수를 사용합니다. 전역 경로의 params API는 경로의 모든 매개변수를 저장합니다.
HTML
<p id="myp">
// 点击对应链接时传入对应参数foo 和 bar
<router-link to="/User/:foo">Go to foo</router-link>
<router-link to="/User/:bar">Go to bar</router-link>
<router-view></router-view>
</p>
로그인 후 복사
JS
const User = {
template:'<p>我的ID是{{ $route.params.id }}</p>',
// 在路由切换时可以观察路由
watch:{
'$route'(to,form){
console.log(to); //要到达的
console.log(form);
}
}
}
const router = new VueRouter({
routes:[
{path:'/user/:id',component:User} // 标记动态参数 id
]
});
var myVue = new Vue({
router
}).$mount("#myp")로그인 후 복사
3. 중첩 라우팅
1. 라우팅 구성 하위 항목 사용
예:
HTML:
<p id="myp">
<router-link to="/User/:foo">Go to foo</router-link>
<router-link to="/User/:bar">Go to bar</router-link>
<router-view></router-view>
</p>
로그인 후 복사
JS:
const User = {
template:'<p><p>我的ID是{{ $route.params.id }}</p><router-link to="/user/childone">ChildOne</router-link><router-link to="/user/childtwo">ChildOne</router-link><router-view></router-view></p>',
}
// 子路由
const userChildOne = {
template:'<p>我是 userChildOne</p>'
}
const userChildTwo = {
template:'<p>我是 userChildTwo</p>'
}
const router = new VueRouter({
routes:[
{path:'/user/:id',component:User,
children:[ // 用法和参数和routes 一样
{path:"/user/childone",component:userChildOne},
{path:"/user/childtwo",component:userChildTwo}
]
}
]
});
var myVue = new Vue({
router
}).$mount("#myp")로그인 후 복사
4. 경로 이름을 지정하려면
1. 매개변수 이름과 v-bind
HTML:
<p id="myp">
<!-- 要用v-bind 的绑定to -->
<router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link>
<router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link>
<router-view></router-view>
</p>로그인 후 복사
JS:
const User = {
template:'<p>我的ID是{{ $route.params.userId }}</p>',
watch:{
'$route'(to,form){
console.log(to);
console.log(form);
}
}
}
const router = new VueRouter({
routes:[
// name 一一对应上
{path:'/user/:userId',name:"userOne",component:User},
{path:'/user/:userId',name:"userTwo",component:User}
]
});
var myVue = new Vue({
router
}).$mount("#myp")로그인 후 복사
5를 사용해야 합니다. 렌더링 뷰 이름을 router-view로 지정하세요. view는 컴포넌트를 렌더링합니다
HTML:
<p id="myp">
<!-- 要用v-bind 的绑定to -->
<router-link :to="{name:'userOne',params:{userId:'123'}}">Go to foo</router-link>
<router-link :to="{name:'userTwo',params:{userId:'456'}}">Go to bar</router-link>
<!-- 视图命名 如果不写name 则为默认为 default-->
<router-view></router-view>
<router-view name='b'></router-view>
</p>로그인 후 복사
JS:
// 四个模板
const UserA = {
template:'<p>我是one,ID是{{ $route.params.userId }}</p>',
}
const UserB = {
template:'<p>我是two,ID是{{ $route.params.userId }}</p>',
}
const UserC = {
template:'<p>我是three,ID是{{ <1ro></1ro>ute.params.userId }}</p>',
}
const UserD = {
template:'<p>我是four,ID是{{ $route.params.userId }}</p>',
}
const router = new VueRouter({
routes:[
// name 一一对应上
{
path:'/user/:userId',
name:"userOne",
components:{ // 注意这里为components 多个“ s ”
default:UserA,
b:UserB
}
},
{
path:'/user/:userId',
name:"userTwo",
components:{
default:UserD,
b:UserC
}
}
]
});
var myVue = new Vue({
router
}).$mount("#myp")로그인 후 복사
6. 리디렉션 및 별칭
리디렉션 및 별칭, 우선 리디렉션 및 별칭이 무엇인지 설명하겠습니다
"redirect" 이는 사용자가 /a를 방문하면 URL이 /b로 대체되고 일치하는 경로는 /b라는 의미입니다.
『Alias』 /a의 별칭은 /b입니다. 사용자가 /b를 방문하면 URL은 /b로 유지되지만 사용자가 /a에 액세스한 것처럼 경로 일치는 /a가 됩니다. /a의 별칭은 /b입니다. 즉, 사용자가 /b에 액세스하면 URL은 /b로 유지되지만 사용자가 /a에 액세스한 것처럼 경로 일치는 /a입니다.数 리디렉션의 주요 매개 변수: 리디렉션 및 별칭은 주로 다음 매개 변수를 사용합니다. alias
Html:
<p id="myp">
<h2>效果查看地址栏最后面的变化</h2>
<router-link to="/User/foo">Go to foo</router-link>
<router-link to="/User/bar">Go to bar</router-link>
<router-link to="/User/Car">Go to bar</router-link>
<router-view></router-view>
</p>
로그인 후 복사
EJS:
const User = {
template:'<p>我是同一个页面</p>',
}
const router = new VueRouter({
mode:"history",
routes:[
{ path:'/User/foo',component:User},
{ path:'/User/bar',redirect: '/User/foo',component:User},
// 重定向的目标也可以是一个命名的路由：
// 甚至是一个方法，动态返回重定向目标：
// 别名设置
{ path:'/User/foo',alias: '/User/Car'}
]
});
var myVue = new Vue({
router
}).$mount("#myp")로그인 후 복사
관련 권장 사항:
Vue-Router TAB 탭 구현
Vue, Vuex 및 Vue-router 기반 애니메이션 전환 기능 구현
3가지 종류의 Vue-Router로 구성 요소 간 점프 구현
위 내용은 vue-router 기본 라우팅 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
