Inhaltsverzeichnis
Routing-Installation und -Nutzung (vue2)
Wertübergabe und -abruf von Routen
Der Unterschied zwischen Abfrageparametern und Routingparametern:
Routing-Prinzip
Routing ist ein wichtiges Plugin in Vue.
Vue ist eine HTML-Seite für eine Einzelseitenanwendung. Wenn wir jedoch den Seitensprungeffekt erzielen möchten, muss ich Routing verwenden.
Was ist ein einzelner Seitensprung? Tatsächlich handelt es sich um eine teilweise Änderung. Tatsächlich ist es immer noch eine einzelne Seite, aber es sieht aus wie ein Sprung.
Es gibt zwei Routing-Modi für Single-Page-Anwendungen
1. Hash-Modus (verwenden Sie das Hashchange-Ereignis, um die Änderung des Hashs der URL zu überwachen)
2. Verlaufsmodus (die Verwendung dieses Modus erfordert die Zusammenarbeit des Hintergrunds, um alle Schnittstellen in unserem Paket index.html einzugeben)
Was genau macht Routing?
Taobao-Beispiel in der Abbildung unten: Wenn auf die Schaltfläche im roten Feld unten geklickt wird, ändert sich der Inhalt im grünen Feld, wodurch eine einseitige Anwendung realisiert wird
Routing-Installation und -Nutzung (vue2)
Die Router-Download-Adresse wurde in einem Blogbeitrag geschrieben. Wenn Sie sie noch nicht heruntergeladen haben, können Sie sie sich ansehen.
Routing-Plugin importieren:
<script src="../js/vue2.7.js"></script><!--vue文件-->
<script src="../js/vue-router.js"></script><!--路由文件-->Installieren Sie das Routing-Plugin in Vue:
<script>
//安装路由，前提要导入路由js
Vue.use(VueRouter)
</script>Erstellen Sie ein VueRouter-Objekt:
var Login = Vue.extends({
template:`
<div>
我是登录页面
</div>
`
});
// 创建VueRouter对象,并配置路由
var myRouter = new VueRouter({
// 配置路由
routes:[
// 指定路由链接、路由名称、路由页面（组件）
{path:'/login',name:'login',component:Login}
]
});Routing verwenden:
var app= new Vue({
el:'#app',
// 引入到vue 实例中，并在模板中使用<router-view>
router:myRouter,
template:`
<div>
头部
<router-view></router-view><!--路由出口-->
尾部
</div>
`
})Routing-Sprung
Es gibt zwei Möglichkeiten, Routen umzuleiten:
-
Verwenden Sie das <router-link>-Tag
<router-link to='/login'></router-link> -
Programmatisches Routing mit js
this.$router.push({path:'/login'}); this.$router.replace({path:'/login'});
veranschaulichen:
- this.$router.push(); fügt Datensätze zum Verlauf hinzu
- this.$router.replace(); fügt keine Datensätze zum Verlauf hinzu.
- this.$router.go(-1) wird häufig verwendet, um die vorherige Adresse zurückzugeben.
Der Unterschied zwischen Push und Replacement besteht darin, ob Sie es nach dem Springen rückwärts oder vorwärts verwenden können
Objekte in Routen:
- this.$route Routing-Informationsobjekt, schreibgeschützt.
- this.$router Routing-Operationsobjekt, nur schreiben.
Sprungbeispiel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
头部
<router-link to="/login">登录</router-link><!--登录的标签方式-->
<router-link to="/person">个人</router-link><!--个人的标签方式-->
<button @click="toLogin">登录按钮</button><!--登录的点击事件方式-->
<button @click="toPerson">个人按钮</button><!--个人的点击事件方式-->
<!--下面是路由出口-->
<router-view></router-view>
尾部
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
//安装路由，前提要导入路由js
Vue.use(VueRouter)
//创建一个登录子组件
var login={
template:`
<div>
登陆页面
</div>
`,
}
//创建一个个人子组件
var person={
template:`
<div>
个人页面
</div>
`,
}
//创建路由配置实例，主要实现 路由和子组件之间的映射
var myrouter=new VueRouter({
routes: [
{path:'/login',name:'login',component:login},
{path:'/person',name:'person',component:person}
]
})
let app=new Vue({
el:"#app",
router:myrouter,
methods: {
toLogin(){
this.$router.push({
path:'/login'
})
},
toPerson(){
this.$router.replace({
path:'/person'
})
},
},
})
</script>
</html>Wertübergabe und -abruf von Routen
Abfrageparameter
Aufbau. Der Abfrageparameter kann mit dem Pfadattribut oder dem Namensattribut übereinstimmen.
<router-link :to="{path:'/login',query:{id:queryid}}"></router-link>oder
<router-link :to="{name:'login',query:{id:queryid}}"></router-link>oder
this.$router.push({path:'/login',query:{id:this.queryid}});nehmen
// 此代码可以写到子组件的钩子函数中
this.$route.query.idRouting-Parameter
Konfigurieren Sie Routing-Regeln
var router = new VueRouter({
routers:[
// 需要在配置路由规则时，使用冒号指定参数
{name:'login',path:'/login/:id',component:LoginVue}
]
});Aufbau. Hinweis: Die beiden Parameter path und params können hier nicht gleichzeitig verwendet werden.
Der Name sollte bei der Konfiguration der Routing-Parameter verwendet werden, da sich der Pfad entsprechend den Parametern ändert.
<router-link :to="{name:'login',params:{id:paramId}}"></router-link>oder
this.$router.push({name:'login',params:{id:this.paramId}});nehmen
// 此代码可以写到子组件的钩子函数中
this.$route.params.idBeispiel einer Wertübergabe:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
头部
<router-link :to="{path:'/login',query:{id:loginId}}">登录query-link方式</router-link>
<button @click="toLogin">登录query-按钮方式</button>
<router-link :to="{name:'person',params:{id:personId}}">个人params-link方式</router-link>
<button @click="toPerson">个人params-按钮方式</button>
<br>
<router-view></router-view><!--路由出口-->
尾部
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
//安装路由，前提要导入路由js
Vue.use(VueRouter)
var login={
template:`
<div>
登陆页面
</div>
`,
mounted() {
console.log(this.$route.query.id);
},
}
//创建一个个人子组件
var person={
template:`
<div>
个人页面
</div>
`,
mounted() {
console.log(this.$route.params.id);
},
}
//创建路由配置实例，主要实现 路由和子组件之间的映射
var myrouter=new VueRouter({
routes: [
{path:'/login',name:'login',component:login},
{path:'/person/:id',name:'person',component:person}
]
})
let app=new Vue({
el:"#app",
router:myrouter,
data() {
return {
loginId:66,
personId:33
}
},
methods: {
toLogin(){
this.$router.push({
path:'/login',
query:{id:this.loginId}
})
},
toPerson(){
this.$router.push({
name:'person',
params:{id:this.personId}
})
},
},
})
</script>
</html>Der Unterschied zwischen Abfrageparametern und Routingparametern:
Die verschiedenen Parameter in der Adressleiste
Abfrageparameter: Routing-Parameter:
Fragen, die jeder haben wird:
Gleiche Route, aber andere Parameter. Um das Problem zu lösen, dass die Seite nicht aktualisiert wird, müssen Sie nur ein Attribut zum Routing-Exit hinzufügen.
<router-view :key="$route.fullPath"></router-view>verschachtelte Routen
Es besteht eine hierarchische Beziehung zwischen Routen. Sie haben auch verschachtelte Beziehungen in Vorlagen.
Es können mehrere Routen gleichzeitig konfiguriert werden.
Verschachtelte Instanz:
Es gibt Kommentare in den Beispielen, die jeder verstehen kann. Wenn Sie es nicht verstehen, können Sie es ein paar Mal lesen und vielleicht können Sie es verstehen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-view></router-view><!--路由出口-->
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
Vue.use(VueRouter);
//导航组件
let nav={
template:`
<div>
<router-link :to="{name:'nav.index'}">首页</router-link>
<router-link :to="{name:'nav.person'}">个人</router-link>
<router-link :to="{name:'nav.message'}">消息</router-link>
<router-view></router-view><!--导航组件的路由出口-->
</div>
`
}
//主页面子组件
let index={
template:`
<div>主页面</div>
`
}
//个人页面子组件
let person={
template:`
<div>个人页面</div>
`
}
//消息页面子组件
let message={
template:`
<div>消息页面</div>
`
}
let router=new VueRouter({
routes:[
{
path:'/nav',
name:'nav',
component:nav,
children:[//配置二级路由
{path:'',redirect:'/nav/index'},//默认显示二级路由页面链接是/nav/index的路由
{path:'index',name:'nav.index',component:index},
{path:'person',name:'nav.person',component:person},
{path:'message',name:'nav.message',component:message},
]
},
{
path:'',
redirect:'/nav'//默认显示页面链接是/nav的路由
}
]
})
let app = new Vue({
el:'#app',
router,//这个地方使用的是简写根据ES6新语法，对象名和参数相同可以直接使用对象名。
});
</script>
</html>Streckenwächter
Damit kann die Anmeldung überprüft und beurteilt werden, ob der Warenkorb nach dem Kauf auf die Seite springt.
Verwenden Sie die Routing-Hook-Funktion beforeEach, um dies zu erreichen
Guard-Beispiel:
Ich habe den Routenwächter gerade in die Instanz der verschachtelten Route eingefügt. Die Funktion besteht darin, zu beurteilen, ob die Route die Startseite ist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-view></router-view><!--路由出口-->
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script src="../js/vue-router.js"></script>
<script>
Vue.use(VueRouter);
//导航子组件
let nav={
template:`
<div>
<router-link :to="{name:'nav.index'}">首页</router-link>
<router-link :to="{name:'nav.person'}">个人</router-link>
<router-link :to="{name:'nav.message'}">消息</router-link>
<router-view></router-view><!--导航组件中的路由出口-->
</div>
`
}
//主页面子组件
let index={
template:`
<div>主页面</div>
`
}
//个人页面子组件
let person={
template:`
<div>个人页面</div>
`
}
//消息页面子组件
let message={
template:`
<div>消息页面</div>
`
}
let router=new VueRouter({
routes:[
{
path:'/nav',
name:'nav',
component:nav,
children:[//配置二级路由
{path:'',redirect:'/nav/index'},//默认显示二级路由页面链接是/nav/index的路由
{path:'index',name:'nav.index',component:index},
{path:'person',name:'nav.person',component:person},
{path:'message',name:'nav.message',component:message},
]
},
{
path:'',
redirect:'/nav'//默认显示页面链接是/nav的路由
}
]
})
let app = new Vue({
el:'#app',
router,//这个地方使用的是简写根据ES6新语法，对象名和参数相同可以直接使用对象名。
mounted() {
this.$router.beforeEach((to,from,next)=>{
console.log(to);
if(to.path=='/nav/index'){
// 跳转到目标路由
next();
}else{
//如果路径不对的话延时两秒再进入
setTimeout(function(){
next();
},2000);
}
});
}
});
</script>
</html>