In diesem Artikel werden hauptsächlich relevante Informationen zu den Grundlagen des Vue-Routers vorgestellt. Ich hoffe, dass dieser Artikel jedem helfen kann, diesen Teil des Inhalts zu verstehen und zu beherrschen alle.
Detaillierte Erläuterung der Vue-Router-Routing-Grundlagen
Heute habe ich die Grundlagen von Vue-Route und die von Vue offiziell empfohlenen Routen zusammengefasst.
1. Erste Schritte
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>
Vorlage (Komponente) erstellen:
(Sie können den Import auch verwenden, um externe Komponenten einzuführen)
var foo={template:"<p>我是foo 组件</p>"};
var bar={template:"<p>我是bar 组件</p>"};Komponenteninjektionsroute:
var routes = [
{path:'/foo',component:foo},
{path:'/bar',component:b ar},
];Erstellen Sie eine Routing-Instanz:
// 这里还可以传入其他配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes;
});Beachten Sie, dass es hier in Routen kein „r“ gibt (Schreiben Sie es nicht als Router)
Erstellen Sie eine Vue-Instanz (und mounten Sie die Instanz)
var routerVue = new Vue({
router
}).$mount("#myp");2. Dynamischer Routenabgleich
Manchmal benötigen wir dieselbe Vorlagenstruktur, aber die Daten sind zu diesem Zeitpunkt unterschiedlich. Dies entspricht dem Verbinden angemeldeter Benutzer mit unterschiedlichen IDs mit derselben Seite, wird jedoch angezeigt Unabhängige Informationen für jeden Benutzer. In diesem Fall verwenden wir den dynamischen Routing-Abgleich.
Dynamisches Routing verwendet hauptsächlich die globalen $route.params und die dynamischen Parameter der Route. Die Parameter-API der globalen Route speichert alle Parameter der Route ::
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. Verschachteltes Routing
1. Verschachteltes Routing bedeutet, dass wir
Zum Beispiel:
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>
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")1. Benennen Sie die Route, um den Routensprung anzugeben
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>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")1. Benennen Sie die Rendering-Ansicht router-view, um anzugeben, welche Ansicht die Komponente rendert
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>// 四个模板
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")Weiterleitungen und Aliase Was ist eine Umleitung?
『Umleitung』 bedeutet, dass die URL durch /b ersetzt wird, wenn der Benutzer auf /a zugreift, und die entsprechende Route dann /b ist,
『Alias』 / Der Alias für a ist /b, was bedeutet, dass, wenn der Benutzer /b besucht, die URL /b bleibt, die Routenübereinstimmung jedoch /a ist, genau so, als ob der Benutzer /a besucht hätte. Der Alias für /a ist /b, was bedeutet, dass, wenn ein Benutzer auf /b zugreift, die URL /b bleibt, die Routenübereinstimmung jedoch /a ist, genau so, als ob der Benutzer auf /a zugegriffen hätte.
Redirect verwendet hauptsächlich Parameter: Redirect und Alias verwenden hauptsächlich Parameter: 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>
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")Das obige ist der detaillierte Inhalt vonTeilen grundlegender Routing-Beispiele von Vue-Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
