devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue Router_如何下载vue-router": "3.4.9

作者：笔触狂放9 | 2024-04-04 14:35:44

赞

踩

如何下载vue-router": "3.4.9

一、Vue Router概述

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。

vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。

而传统的多页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。

路由中有三个基本的概念 route, routes, router。

1. route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容， 这是一条route, about按钮 => about 内容， 这是另一条路由。

2. routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

3. router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？ 就是当用户点击home 按钮的时候，怎么办？

这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

4. 客户端中的路由，实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候，about 中的内容全部隐藏，反之也是一样。客户端路由有两种实现方式：基于hash 和基于html5 history api.

二、Vue Router入门程序

1.下载引入VueRouter文件

2.创建组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="../public/js/vue.min.js"></script>
  7.     <script type="text/javascript" src="../public/js/vue-router-3.4.9.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div id="app">
  12.  
  13.     
  14.  
  15. </div>
  16.  
  17. <!--注册-->
  18. <template id="register">
  19.     <h1>这是注册页面</h1>
  20. </template>
  21.  
  22. <!--登录-->
  23. <template id="login">
  24.     <h1>这是登录页面</h1>
  25. </template>
  26.  
  27. <script>
  28.  
  29.     let RegisterComponent = {
  30.         template:"#register"
  31.     }
  32.  
  33.     let LoginComponent = {
  34.         template: "#login"
  35.     }
  36.  
  37.  
  38.  
  39.     new Vue({
  40.         el:"#app",
  41.         components:{RegisterComponent,LoginComponent}
  42.     });
  43.  
  44. </script>
  45.  
  46. </body>
  47. </html>

3.创建router

  1. // 创建路由【添加路由规则】
  2.     let vueRouter = new VueRouter({
  3.         routes:[
  4.             {
  5.                 name:"register",// 路由名称
  6.                 path:"/register",// 组件对应的路由路径
  7.                 component:RegisterComponent
  8.             },
  9.             {
  10.                 name:"login",// 路由名称
  11.                 path:"/login",// 组件对应的路由路径
  12.                 component:LoginComponent
  13.             }
  14.         ]
  15.     });

 

4.挂载router

  1. new Vue({
  2.         el:"#app",
  3.         components:{RegisterComponent,LoginComponent},
  4.         router
  5.     });

5.使用router

  1. <div id="app">
  2.  
  3.     <!--<a href="#/register">注册</a>
  4.     <a href="#/login">登录</a>-->
  5.  
  6.     <router-link to="/register">注册</router-link>
  7.     <router-link to="/login">登录</router-link>
  8.  
  9.  
  10.     <hr>
  11.  
  12. <!--    负责展示组件-->
  13.     <router-view></router-view>
  14.  
  15. </div>

三、Vue Router简便方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="../public/js/vue.min.js"></script>
  7.     <script type="text/javascript" src="../public/js/vue-router-3.4.9.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div id="app">
  12.  
  13.  
  14.     <router-link v-for="(item,index) in array" :key="index" :to="item.path" v-text="item.context"></router-link>
  15.  
  16. <!--    负责展示组件-->
  17.     <router-view></router-view>
  18.  
  19. </div>
  20.  
  21. <!--注册-->
  22. <template id="register">
  23.     <h1>这是注册页面</h1>
  24. </template>
  25.  
  26. <!--登录-->
  27. <template id="login">
  28.     <h1>这是登录页面</h1>
  29. </template>
  30.  
  31. <script>
  32.  
  33.     let RegisterComponent = {
  34.         template:"#register"
  35.     }
  36.  
  37.     let LoginComponent = {
  38.         template: "#login"
  39.     }
  40.  
  41.  
  42.     // 创建路由【添加路由规则】
  43.     let router = new VueRouter({
  44.         routes:[
  45.             {
  46.                 name:"register",// 路由名称
  47.                 path:"/register",// 组件对应的路由路径
  48.                 component:RegisterComponent
  49.             },
  50.             {
  51.                 name:"login",// 路由名称
  52.                 path:"/login",// 组件对应的路由路径
  53.                 component:LoginComponent
  54.             }
  55.         ]
  56.     });
  57.  
  58.     new Vue({
  59.         el:"#app",
  60.         components:{RegisterComponent,LoginComponent},
  61.         router,
  62.         data:{
  63.             array:[
  64.                 {path:"/register",context:"注册"},
  65.                 {path:"/login",context:"登录"}
  66.             ]
  67.         }
  68.     });
  69.  
  70.  
  71. </script>
  72.  
  73. </body>
  74. </html>

四、router-link

router-link中的to属性值可以是多种类型

1.声明式导航

直接写在行内的便是声明式导航；

2.编程式导航

  1. methods:{
  2.     loginGo(){
  3.         this.$router.push({path:"/login"});
  4.     }
  5. }

五、$router和$route

$route：是当前路由规则对象

$router：是VueRouter对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="../public/js/vue.min.js"></script>
  7.     <script type="text/javascript" src="../public/js/vue-router-3.4.9.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div id="app">
  12.  
  13.  
  14.     <router-link to="/login">登录</router-link>
  15.  
  16.     <router-link :to="{path:'/register'}">注册</router-link>
  17.     <router-link :to="{name:'register'}">注册</router-link>
  18.  
  19.     <button @click="loginGo">跳转到登录</button>
  20.  
  21.  
  22. <!--    负责展示组件-->
  23.     <router-view></router-view>
  24.  
  25. </div>
  26.  
  27. <!--注册-->
  28. <template id="register">
  29.     <h1>这是注册页面</h1>
  30. </template>
  31.  
  32. <!--登录-->
  33. <template id="login">
  34.     <h1>这是登录页面</h1>
  35. </template>
  36.  
  37. <script>
  38.  
  39.     let RegisterComponent = {
  40.         template:"#register"
  41.     }
  42.  
  43.     let LoginComponent = {
  44.         template: "#login"
  45.     }
  46.  
  47.  
  48.     // 创建路由【添加路由规则】
  49.     let router = new VueRouter({
  50.         routes:[
  51.             {
  52.                 name:"register",// 路由名称
  53.                 path:"/register",// 组件对应的路由路径
  54.                 component:RegisterComponent
  55.             },
  56.             {
  57.                 name:"login",// 路由名称
  58.                 path:"/login",// 组件对应的路由路径
  59.                 component:LoginComponent
  60.             }
  61.         ]
  62.     });
  63.  
  64.     new Vue({
  65.         el:"#app",
  66.         components:{RegisterComponent,LoginComponent},
  67.         router,
  68.         methods:{
  69.             loginGo(){
  70.                 console.log(this.$route);
  71.                 console.log(this.$router);
  72.             }
  73.         }
  74.     });
  75.  
  76.  
  77. </script>
  78.  
  79. </body>
  80. </html>

$router函数

1.push：跳转路由【会在历史记录中添加一个记录，这样后退能回到之前的页面】

2.replace：替换导航【不会在历史记录中添加一个记录，不能后退回到之前的页面】

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script type="text/javascript" src="../public/js/vue.min.js"></script>
  7.     <script type="text/javascript" src="../public/js/vue-router-3.4.9.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div id="app">
  12.  
  13.  
  14.     <router-link to="/login">登录</router-link>
  15.  
  16.     <router-link :to="{path:'/register'}">注册</router-link>
  17.     <router-link :to="{name:'register'}">注册</router-link>
  18.  
  19.     <button @click="loginGo">跳转到登录</button>
  20.  
  21.  
  22. <!--    负责展示组件-->
  23.     <router-view></router-view>
  24.  
  25. </div>
  26.  
  27. <!--注册-->
  28. <template id="register">
  29.     <h1>这是注册页面</h1>
  30. </template>
  31.  
  32. <!--登录-->
  33. <template id="login">
  34.     <h1>这是登录页面</h1>
  35. </template>
  36.  
  37. <script>
  38.  
  39.     let RegisterComponent = {
  40.         template:"#register"
  41.     }
  42.  
  43.     let LoginComponent = {
  44.         template: "#login"
  45.     }
  46.  
  47.  
  48.     // 创建路由【添加路由规则】
  49.     let router = new VueRouter({
  50.         routes:[
  51.             {
  52.                 name:"register",// 路由名称
  53.                 path:"/register",// 组件对应的路由路径
  54.                 component:RegisterComponent
  55.             },
  56.             {
  57.                 name:"login",// 路由名称
  58.                 path:"/login",// 组件对应的路由路径
  59.                 component:LoginComponent
  60.             }
  61.         ]
  62.     });
  63.  
  64.     new Vue({
  65.         el:"#app",
  66.         components:{RegisterComponent,LoginComponent},
  67.         router,
  68.         methods:{
  69.             loginGo(){
  70.                 
  71.                 // this.$router.push({path:"/login"});
  72.                 this.$router.replace({path:"/login"});
  73.             }
  74.         }
  75.     });
  76.  
  77.  
  78. </script>
  79.  
  80. </body>
  81. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/359265
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号