【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用

清疚 2023-10-15 17:49 118阅读 0赞

单页面应用 与 多页面应用

单页面应用（Single-Page Application，SPA）和多页面应用（Multi-Page Application，MPA）是 Web 应用程序的两种不同架构方式。它们在页面加载和交互方式上有所区别。

单页面应用（SPA）：指的是整个应用只有一个 HTML 页面，页面的内容和交互都通过 JavaScript 动态加载和更新。在 SPA 中，页面的切换和内容的变化通过前端路由来实现，通常使用框架（如 Vue、React、Angular）来构建。SPA 的优点是用户体验好，无需刷新整个页面即可根据用户交互动态地更新内容，提供流畅的用户界面。但对于首次加载较大的应用，会消耗较多的初始加载时间。

多页面应用（MPA）：指的是应用由多个独立的 HTML 页面组成，每个页面对应一个独立的功能或视图。在 MPA 中，每个页面都是独立的，它们通过链接或表单提交等方式进行页面跳转。在每个页面中，服务器会返回一个新的 HTML 页面，包含所需的样式和脚本。MPA 的优点是每个页面都有独立的 URL，有利于 SEO（搜索引擎优化），也更适合传统的 Web 开发方式。但页面之间的切换会导致整个页面的刷新，用户体验稍差一些。

选择SPA还是MPA主要取决于应用的需求和目标。SPA适合构建交互复杂、用户体验要求高的应用，如社交媒体应用、在线编辑器等；而MPA适合构建内容丰富、独立页面较多的应用，如电子商务网站、新闻门户等。
在这里插入图片描述

常见的网站比如网易云音乐就是单页面应用，而京东，淘宝就是一个多页面应用。

在这里插入图片描述

VueRouter路由

像vue开发的就是一个典型的单页面程序。
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。

在这里插入图片描述

如何配置VueRouter
  1. 下载vue-router因为它是一个单独的模块所以需要下载。
    vue2对应的vue-router版本是 vue-router3.x
    vue3对应的vue-router版本是 vue-router4.x
    使用npm下载：npm install vue-router@3.6.5 --save
    使用yarn下载：yarn add vue-router@3.6.5

  2. 在main.js中引入。

    import VueRouter from ‘vue-router’

  3. 安装注册。

    Vue.use(VueRouter)

  4. 创建路由对象。

    const router = new VueRouter();

  5. 将路由对象注入到Vue实列中，建立关联,键值对形式，键与值同名可简写。

    new Vue({

    render: h => h(App),
    router
    }).$mount(‘#app’)

main.js完整代码：

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import VueRouter from 'vue-router'
  5. Vue.config.productionTip = false
  6. Vue.use(VueRouter)
  8. const router = new VueRouter();
  10. new Vue({
  12.   render: h => h(App),
  13.   router
  14. }).$mount('#app')

配置成功启动项目浏览器顶部地址栏会出现#号
在这里插入图片描述

如何使用VueRouter

在这里插入图片描述

首先肯定是要配置路由规则。
首先准备了三个简单的页面组件。
引入页面组件，然后将他添加到router的routes属性中，path是访问路径，component是对应的组件页面{path:"/fine",component:MyFine},页面组件的名称最好超过两个单词，否则会报错，因为是vue规定的，为了有更强大的语义性。name

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import MyFine from './views/MyFine.vue'
  4. import MyFriend from './views/MyFriend.vue'
  5. import MyIndex from './views/MyIndex.vue'
  6. import VueRouter from 'vue-router'
  7. Vue.use(VueRouter)
  9. Vue.config.productionTip = false
  11. const router = new VueRouter({
  13. //配置路由规则 path是访问路径，component是对应的组件页面
  14.   routes:[
  15.     {
  16.     path:"/fine",component:MyFine},
  17.     {
  18.     path:"/friend",component:MyFriend},
  19.     {
  20.     path:"/index",component:MyIndex},
  21.   ]
  22. });
  23. new Vue({
  25.   render: h => h(App),
  26.   router
  27. }).$mount('#app')

路由的路径跳转，与容器 <router-view></router-view>

  1. <template>
  2.   <div id="app">
  3.     <div class="menu-box">
  4.       <ul class="menu">
  5.         <!-- 路由路径跳转只需要在a标签上写main.js配置规则的path路径 -->
  6.         <li><a href="#/index">首页</a></li>
  7.         <li><a href="#/fine">发现</a></li>
  8.         <li><a href="#/friend">朋友</a></li>
  9.       </ul>
  10.     </div>
  11.     <div >
  12.       <!-- 这是组件页面的容器,切换菜单只会更新这里面的内容 -->
  13.       <router-view></router-view>
  14.     </div>
  15.   </div>
  16. </template>
  18. <script>
  20. export default {
  22.   name: 'App',
  23.   components: {
  25.   }
  26. }
  27. </script>
  29. <style>
  30. *{
  32.   margin: 0;
  33.   padding: 0;
  34. }
  35. #app {
  37.   font-family: Avenir, Helvetica, Arial, sans-serif;
  38.   -webkit-font-smoothing: antialiased;
  39.   -moz-osx-font-smoothing: grayscale;
  40.   text-align: center;
  41.   color: #2c3e50;
  42. }
  43. .menu-box{
  45.   width: 100%;
  46.   height: 50px;
  47. }
  48. .menu{
  50.   height: 100%;
  51.   text-align: center;
  52.   line-height: 50px;
  53. }
  54. .menu>li{
  56.   float: left;
  57.   width: 33%;
  58.   list-style: none;
  59.   background: skyblue;
  60. }
  62. </style>

效果点击上面的menu菜单下面的内容也会随之改变：
在这里插入图片描述

提取路由代码，封装路由模块

像上面这样配置路由会有一点问题，就是不易于维护，因为把所有的配置全部都写在main.js里面，那我们后面维护看见main.js文件里面的一堆代码，头都晕了，所以这里我们将它提取出来，再通过import导入到main,js。

  1. 首先建立路由模块文件
    在这里插入图片描述

  2. 将main.js里面配置路由的代码赋值到index.js。导入文件的路径需要修改，@:代表从src文件出发寻找文件。

    import MyFine from ‘@/views/MyFine.vue’
    import MyFriend from ‘@/views/MyFriend.vue’
    import MyIndex from ‘@/views/MyIndex.vue’
    import VueRouter from ‘vue-router’
    import Vue from ‘vue’

    Vue.use(VueRouter)

    const router = new VueRouter({

    1. routes:[
    2.   {
    3. path:"/fine",component:MyFine},
    4.   {
    5. path:"/friend",component:MyFriend},
    6.   {
    7. path:"/index",component:MyIndex},
    8. ]

    });

    export default router;

  3. 再main.js里面导入路由模块直接使用。

    import Vue from ‘vue’
    import App from ‘./App.vue’
    //导入路由模块
    import router from ‘./router/index.js’

    Vue.config.productionTip = false

    new Vue({

    render: h => h(App),
    //直接使用
    router
    }).$mount(‘#app’)

使用给menu菜单选中的高亮样式
  1. router-link是什么?
    vue-router提供的全局组件，用于替换 a 标签

  2. router-link怎么用?

再使用<router-link to="/index">首页</router-link>时to属性里面的路径就可以不用加#号了
必须传入to属性,指定路由路径值

  1. router-link好处?
    能跳转，能高亮(自带激活时的类名）router-link-active 和 router-link-exact-active我们需要高亮效果可以直接再style样式中为这个类名添加高亮的样式了。

修改刚才的代码为：

  1. <template>
  2.   <div id="app">
  3.     <div class="menu-box">
  4.       <ul class="menu">
  5.         <!-- 路由路径跳转只需要在a标签上写main.js配置规则的path路径 -->
  6.         <router-link to="/index">首页</router-link>
  7.         <router-link to="/fine">发现</router-link>
  8.         <router-link to="/friend">朋友</router-link>
  9.       </ul>
  10.     </div>
  11.     <div >
  12.       <!-- 这是组件页面的容器,切换菜单只会更新这里面的内容 -->
  13.       <router-view></router-view>
  14.     </div>
  15.   </div>
  16. </template>
  18. <script>
  20. export default {
  22.   name: 'App',
  23.   components: {
  25.   }
  26. }
  27. </script>
  29. <style>
  30. *{
  32.   margin: 0;
  33.   padding: 0;
  34. }
  35. #app {
  37.   font-family: Avenir, Helvetica, Arial, sans-serif;
  38.   -webkit-font-smoothing: antialiased;
  39.   -moz-osx-font-smoothing: grayscale;
  40.   text-align: center;
  41.   color: #2c3e50;
  42. }
  43. .menu-box{
  45.   width: 100%;
  46.   height: 50px;
  47. }
  48. .menu{
  50.   height: 100%;
  51.   text-align: center;
  52.   line-height: 50px;
  53. }
  54. .menu>a{
  56.   float: left;
  57.   width: 33%;
  58.   display: block;
  59.   list-style: none;
  60.   background: skyblue;
  61. }
  62. //为激活时的这个类名添加高亮属性样式
  63. .menu>a.router-link-active{
  65.   background: rgb(12, 155, 211);
  66. }
  67. </style>

效果：
在这里插入图片描述

router-link-active 和 router-link-exact-active的意义

在这里插入图片描述
这里可以看见我选中的标签上面时加了两个类的，这两个类的意义是什么呢？
router-link-active ：模糊匹配
router-link-exact-active：精确匹配
模糊匹配就是地址栏上面有子目录，也可以匹配上。

而精确匹配就是地址栏和router-link的to属性路径必须时一模一样，才可以匹配上。
在这里插入图片描述

如现在时两个条件都满足，模糊和精确条件都满足，所以选中的menu里面类就是两个：
在这里插入图片描述
如现在就是不满足精确条件了，所以选中的menu里面类就是一个router-link-active ：
在这里插入图片描述

自定义高亮类名

在这里插入图片描述
在路由模块中修改：

  1. import MyFine from '@/views/MyFine.vue'
  2. import MyFriend from '@/views/MyFriend.vue'
  3. import MyIndex from '@/views/MyIndex.vue'
  4. import VueRouter from 'vue-router'
  5. import Vue from 'vue'
  6. Vue.use(VueRouter)
  7. const router = new VueRouter({
  9.     routes:[
  10.       {
  11.     path:"/fine",component:MyFine},
  12.       {
  13.     path:"/friend",component:MyFriend},
  14.       {
  15.     path:"/index",component:MyIndex},
  16.     ],
  17.     //模糊匹配的类名
  18.     linkActiveClass:"active",
  19.     //精确匹配的类名
  20.     linkExactActiveClass:"exact-active"
  21.   });
  22. export default router;

这样添加的就是自定义的类名了，如图：
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，118人围观）

还没有评论，来说两句吧...

相关阅读

    相关 VueRouter路由嵌套

    1. 前言 本小节我们介绍如何嵌套使用 VueRouter。嵌套路由在日常的开发中非常常见，如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置

    怼烎@怼烎@/ 0 赞/ 222 阅读

    相关 VueRouter路由传参

    1. 前言 本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 207 阅读