Maison > Article > interface Web > Trois types de Vue-Router pour implémenter des sauts entre composants
Cet article présente principalement en détail les trois méthodes de Vue-Router pour réaliser des sauts entre les composants. Il a une certaine valeur de référence. J'espère que cela pourra aider tout le monde.
VueRouter est utilisé pour implémenter des sauts entre les composants pour votre référence. Le contenu spécifique est le suivant
Fournit 3 façons d'implémenter des sauts :
① Modifiez directement l'adresse de routage dans la barre d'adresse
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <!-- 引入文件 --> <script src="js/vue-router.js"></script> </head> <body> <p id="container"> <p>{{msg}}</p> <!--通过router-view指定盛放组件的容器 --> <router-view></router-view> </p> <script> var testLogin = Vue.component("login",{ template:` <p> <h1>这是我的登录页面</h1> </p> ` }) var testRegister = Vue.component("register",{ template:` <p> <h1>这是我的注册页面</h1> </p> ` }) //配置路由词典 //对象数组 const myRoutes =[ //当路由地址:地址栏中的那个路径是myLogin访问组件 //组件是作为标签来用的所以不能直接在component后面使用 //要用返回值 //path:''指定地址栏为空:默认为Login页面 {path:'',component:testLogin}, {path:'/myLogin',component:testLogin}, {path:'/myRegister',component:testRegister} ] const myRouter = new VueRouter({ //myRoutes可以直接用上面的数组替换 routes:myRoutes }) new Vue({ router:myRouter, //或者: /* router:new VueRouter({ routes:[ {path:'/myLogin',component:testLogin}, {path:'/myRegister',component:testRegister} ] }) */ el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>
②Sauter via le lien du routeur
<router-link to="/myRegister">注册</router-link>
{{msg}}
<script> var testLogin = Vue.component("login",{ template:` <p> <h1>这是我的登录页面</h1> <router-link to="/myRegister">注册</router-link> </p> ` /*to后面是路由地址*/ }) var testRegister = Vue.component("register",{ template:` <p> <h1>这是我的注册页面</h1> </p> ` }) //配置路由词典 const myRoutes =[ {path:'',component:testLogin}, {path:'/myLogin',component:testLogin}, {path:'/myRegister',component:testRegister} ] const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter, el:"#container", data:{ msg:"Hello VueJs" } }) </script>
③Grâce à la programmation js
jumpToLogin: function () { this.$router.push('/myLogin'); }
Code
{{msg}}
<script> var testLogin = Vue.component("login",{ template:` <p> <h1>这是我的登录页面</h1> <router-link to="/myRegister">注册</router-link> </p> ` /*to后面是路由地址*/ }) var testRegister = Vue.component("register",{ methods:{ jumpToLogin:function(){ this.$router.push('/myLogin'); } }, template:` <p> <h1>这是我的注册页面</h1> <button @click="jumpToLogin">注册完成,去登录</button> </p> ` }) //配置路由词典 const myRoutes =[ {path:'',component:testLogin}, {path:'/myLogin',component:testLogin}, {path:'/myRegister',component:testRegister} ] const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter, el:"#container", data:{ msg:"Hello VueJs" } }) </script>
Recommandations associées :
À propos de vue-router pour implémenter le transfert de paramètres de saut entre les composants
Explication détaillée de vue -routage du routeur et navigation inter-pages
Explication détaillée du routage d'une seule page de vue-router
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!