vue-router EssenceEs handelt sich um ein Drittanbieterpaket, das bei der Verwendung heruntergeladen werden muss [Verwandte Empfehlungen: vue.js Video-Tutorial]
Schritte (7-Schritte-Methode):
1. Laden Sie das vue-router
-Modul in das aktuelle Projekt herunter vue-router
模块到当前工程
yarn add vue-router
2.在main.js中引入VueRouter函数
// 引入路由import VueRouter from "vue-router";
3.添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件
// 注册全局Vue.use(VueRouter)
4.创建路由规则数组 – 路径和组件名对应关系
创建路由规则数组(需要准备切换的页面组件)把准备好的页面组件引入到main.js中
const routes = [{ path: "/", redirect: "find" //默认显示推荐组件(路由的重定向) }, { path: "/find", name: "Find", component: Find, //二级路由 children: [{ path: "/", redirect: "recom" //默认显示推荐组件 }, { path: "ranking", //注意二级路由的路径千万不要加/ component: Ranking }, { path: "songlist", component: SongList }, ] }, { path: "/my", name: "My", component: My }, { path: "/part", name: "Part", component: Part }, { path: "*", component: NotFound //定义找不到已有组件时显示404 }, ]
5.用规则生成路由对象
// 创建路由对象并且传入规则const router = new VueRouter({ routes, mode: "history" //路由模式(默认为hash模式)})
6.把路由对象注入到new Vue实例中
new Vue({ router, //导入路由对象 render: h => h(App),}).$mount('#app')
7.用router-view
作为挂载点, 切换不同的路由页面
当url的hash值路径切换,显示规则里对应的组件
router-view
实现路由内容的地方,引入组件时写到需要引入的地方 需要注意的是,使用vue-router控制路由则必须router-view作为容器。(可以先引入根组件App.vue中进行自测)
注意:一切都要以url上hash值为准
router-link
是vue-router提供了一个全局组件- router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
- router-link提供了声明式导航高亮的功能(自带类名)
代码如下:
<template> <div> <div class="footer_wrap"> <router-link to="/find">发现音乐</router-link> <router-link to="/my">我的音乐</router-link> <router-link to="/part">朋友</router-link> </div> <div class="top"> <router-view></router-view> </div> </div> </template> //在控制台元素检查时会发现激活的类名 在样式style中定义高亮样式 点击时就会高亮
router-link好处 : 自带激活时的类名, 可以做高亮
在router-link上的to属性传值, 语法格式如下 :
(方式一)
to=/path?参数名=值
例:
to="/part?name=小明"
对应页面组件接收传递过来的值
$route.query.参数名
接收数据:$route.query.name
(方式二)
to=“/path/值” (需在路由规则里配置/path/:参数名)
例:
to="/part/小王"
配置:
path:"/part/:username"
对应页面组件接收传递过来的值 (注意动态参数需要用params接收)
$route.params.参数名
接收数据:$route.params.username
用JS代码来进行跳转
语法: path或者name任选一个
$ router
和 $ route
的区别$router : 是路由操作对象,只写对象
$route : 路由信息对象,只读对象
$ router操作路由跳转
this.$router.push({ name:‘hello’, query:{ name:‘word’, age:‘11’ } })
$route读取 路由参数接收
var name = this.$route.query.name;
path 和 name路由跳转方式,都可以用query传参
- 使用path方式跳转路由 path会忽略params 所以path不能和params一起使用
- 推荐使用name和query方式实现路由跳转
params传参,push里面只能是 name:‘xxx’,不能是path:‘/xxx’,因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!
通过params传参
==注意:==这里使用name路由跳转方式路径不需要加
/
this.$router.push({ name:"Home", params:{ id:this.id }})Nach dem Login kopieren
2 Führen Sie die VueRouter-Funktion in main.js ein
this.$route.params.id
code>router-view code> wird als Mount-Punkt zum Wechseln verschiedener Routing-Seiten verwendetthis.$router.push({ path:"/Search", query:{ //query是个配置项 age:20 }})Nach dem Login kopierenNach dem Login kopieren
Wenn der Hash-Wert-Pfad der URL gewechselt wird, wird die entsprechende Komponente in der Regel angezeigt
Router-View
ist der Ort, an dem Routing-Inhalte implementiert werden. Notieren Sie sich die Orte, die eingeführt werden müssen. Beachten Sie, dass bei der Verwendung von Vue-Router zur Steuerung des Routings Router-View verwendet werden muss Container. (Sie können zunächst die Root-Komponente App.vue zum Selbsttest einführen)
Hinweis: Alles muss auf dem Hash-Wert der URL basieren
2. Declarative-router- link [Der einfachste Weg, einen Sprung zu erreichen]
router-link
wird von vue-router bereitgestellt. Eine globale KomponenteDer Code lautet wie folgt:
this.$route.query.age
(Methode 1)
to=/path?Parameter name=value
Beispiel: to="/part?name=Xiao Ming"
$route .query.Parameter name
🎜Daten empfangen: $route.query.name🎜🎜🎜(Methode 2)🎜🎜🎜to="/ path/value“ (/path/: Parametername muss in der Routing-Regel konfiguriert werden)🎜🎜 Beispiel:to="/part/小王"
🎜🎜Konfiguration: path:“ /part/:username"
🎜🎜🎜Die entsprechende Seitenkomponente empfängt den übergebenen Wert (Beachten Sie, dass dynamische Parameter mithilfe von Parametern empfangen werden müssen)🎜🎜🎜$route.params. Parametername🎜🎜Daten empfangen: $route .params.username🎜🎜🎜 3. Programmierung – JS-Code zum Springen verwenden🎜🎜JS-Code zum Springen verwenden🎜🎜Syntax: Wählen Sie entweder Pfad oder Namen🎜$ router
und $ route
this.$router.push({ path:"/Search", query:{ //query是个配置项 age:20 }})
this.$route.query.age
/
nicht hinzufügen, wenn Sie hier die Name-Route-Jump-Methode verwenden, da es sich nur um einen Namen handelt🎜🎜🎜 rrreee🎜🎜🎜Eine weitere Seite empfängt: 🎜🎜🎜🎜Um hier Parameter zum Übergeben von Parametern zu verwenden, müssen Sie Parameter schreiben, um 🎜🎜🎜rrreee🎜🎜🎜Parameter durch Abfrage übergeben🎜🎜🎜rrreee🎜🎜 zu erhalten 🎜Eine weitere Seite erhält 🎜 🎜🎜rrreee🎜🎜🎜que ry entspricht einer GET-Anfrage. Wenn die Seite springt, können Sie die Anforderungsparameter in der Adressleiste sehen 🎜🎜🎜Zusammenfassung: 🎜🎜🎜Abfrage entspricht einer GET-Anfrage. Wenn die Seite springt, können Sie die Anforderungsparameter in der Adressleiste sehen. 🎜🎜🎜🎜Parameter entsprechen einer POST-Anfrage. Die Parameter werden nicht in der Adresse angezeigt bar🎜🎜Das obige ist der detaillierte Inhalt vonSuper detailliert! Fassen Sie die drei Möglichkeiten zusammen, wie Vue Routing-Sprünge implementiert!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!