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

清疚 2023-10-15 17:49 137阅读 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适合构建内容丰富、独立页面较多的应用，如电子商务网站、新闻门户等。  
![在这里插入图片描述][fcb9f8bb3340433fac3c23ee571813c1.png_pic_center]

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

![在这里插入图片描述][1f2950fa87b84dbe9d79918c6afc7b4e.png_pic_center]

#### VueRouter路由 ####

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

![在这里插入图片描述][832272960565404bb1c99bd71bc6afeb.png_pic_center]

##### 如何配置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'

1.  安装注册。

Vue.use(VueRouter)

1.  创建路由对象。

const router = new VueRouter();

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

new Vue({
        
      render: h => h(App),
      router
    }).$mount('#app')

main.js完整代码：

import Vue from 'vue'
    import App from './App.vue'
    import VueRouter from 'vue-router'
    
    Vue.config.productionTip = false
    Vue.use(VueRouter)
    
    const router = new VueRouter();
    
    new Vue({
        
      render: h => h(App),
      router
    }).$mount('#app')

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

##### 如何使用VueRouter #####

![在这里插入图片描述][939abcdc4a8f4a0392f75aa4ee19eb56.png_pic_center]

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

import Vue from 'vue'
    import App from './App.vue'
    import MyFine from './views/MyFine.vue'
    import MyFriend from './views/MyFriend.vue'
    import MyIndex from './views/MyIndex.vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    
    Vue.config.productionTip = false
    
    const router = new VueRouter({
        
    //配置路由规则 path是访问路径，component是对应的组件页面
      routes:[
        {
        path:"/fine",component:MyFine},
        {
        path:"/friend",component:MyFriend},
        {
        path:"/index",component:MyIndex},
      ]
    });
    new Vue({
        
      render: h => h(App),
      router
    }).$mount('#app')

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

<template>
      <div id="app">
        <div class="menu-box">
          <ul class="menu">
            
            <li><a href="#/index">首页</a></li>
            <li><a href="#/fine">发现</a></li>
            <li><a href="#/friend">朋友</a></li>
          </ul>
        </div>
        <div >
          
          <router-view></router-view>
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
        
      name: 'App',
      components: {
        
      }
    }
    </script>
    
    <style>
    *{
        
      margin: 0;
      padding: 0;
    }
    #app {
        
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    .menu-box{
        
      width: 100%;
      height: 50px;
    }
    .menu{
        
      height: 100%;
      text-align: center;
      line-height: 50px;
    }
    .menu>li{
        
      float: left;
      width: 33%;
      list-style: none;
      background: skyblue;
    }
    
    </style>

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

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

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

1.  首先建立路由模块文件  
    ![在这里插入图片描述][991011bc30174fb9be6d316620ef1ea3.png_pic_center]
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({
        
        routes:[
          {
        path:"/fine",component:MyFine},
          {
        path:"/friend",component:MyFriend},
          {
        path:"/index",component:MyIndex},
        ]
      });
    
    export default router;

1.  再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="/路径值"></router-link>

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

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

修改刚才的代码为：

<template>
      <div id="app">
        <div class="menu-box">
          <ul class="menu">
            
            <router-link to="/index">首页</router-link>
            <router-link to="/fine">发现</router-link>
            <router-link to="/friend">朋友</router-link>
          </ul>
        </div>
        <div >
          
          <router-view></router-view>
        </div>
      </div>
    </template>
    
    <script>
    
    export default {
          
      name: 'App',
      components: {
          
      }
    }
    </script>
    
    <style>
    *{
          
      margin: 0;
      padding: 0;
    }
    #app {
          
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    .menu-box{
          
      width: 100%;
      height: 50px;
    }
    .menu{
          
      height: 100%;
      text-align: center;
      line-height: 50px;
    }
    .menu>a{
          
      float: left;
      width: 33%;
      display: block;
      list-style: none;
      background: skyblue;
    }
    //为激活时的这个类名添加高亮属性样式
    .menu>a.router-link-active{
           
      background: rgb(12, 155, 211);
    }
    </style>

效果：  
![在这里插入图片描述][50a9d558fe8d40389b90186ea16ba6bf.png_pic_center]

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

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

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

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

###### 自定义高亮类名 ######

![在这里插入图片描述][e5d6d0a022dd4777b6da661443691ff8.png_pic_center]  
在路由模块中修改：

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({
        
        routes:[
          {
        path:"/fine",component:MyFine},
          {
        path:"/friend",component:MyFriend},
          {
        path:"/index",component:MyIndex},
        ],
        //模糊匹配的类名
        linkActiveClass:"active",
        //精确匹配的类名
        linkExactActiveClass:"exact-active"
      });
    export default router;

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

[fcb9f8bb3340433fac3c23ee571813c1.png_pic_center]: https://img-blog.csdnimg.cn/fcb9f8bb3340433fac3c23ee571813c1.png#pic_center
[1f2950fa87b84dbe9d79918c6afc7b4e.png_pic_center]: https://img-blog.csdnimg.cn/1f2950fa87b84dbe9d79918c6afc7b4e.png#pic_center
[832272960565404bb1c99bd71bc6afeb.png_pic_center]: https://img-blog.csdnimg.cn/832272960565404bb1c99bd71bc6afeb.png#pic_center
[a68291a098e7461a948815557c4976ce.png_pic_center]: https://img-blog.csdnimg.cn/a68291a098e7461a948815557c4976ce.png#pic_center
[939abcdc4a8f4a0392f75aa4ee19eb56.png_pic_center]: https://img-blog.csdnimg.cn/939abcdc4a8f4a0392f75aa4ee19eb56.png#pic_center
[fdd05d2a2e2747239a46200008bc4895.png_pic_center]: https://img-blog.csdnimg.cn/fdd05d2a2e2747239a46200008bc4895.png#pic_center
[991011bc30174fb9be6d316620ef1ea3.png_pic_center]: https://img-blog.csdnimg.cn/991011bc30174fb9be6d316620ef1ea3.png#pic_center
[50a9d558fe8d40389b90186ea16ba6bf.png_pic_center]: https://img-blog.csdnimg.cn/50a9d558fe8d40389b90186ea16ba6bf.png#pic_center
[ed1bd3ce162843519a489e6673e83bb3.png_pic_center]: https://img-blog.csdnimg.cn/ed1bd3ce162843519a489e6673e83bb3.png#pic_center
[6e32846d1c314eab8d93a80e5a9e24ed.png_pic_center]: https://img-blog.csdnimg.cn/6e32846d1c314eab8d93a80e5a9e24ed.png#pic_center
[121289e151af44d1ab056e46bbb2155d.png_pic_center]: https://img-blog.csdnimg.cn/121289e151af44d1ab056e46bbb2155d.png#pic_center
[fabb9cbe9fad4f348e282f7bcb70477a.png_pic_center]: https://img-blog.csdnimg.cn/fabb9cbe9fad4f348e282f7bcb70477a.png#pic_center
[e5d6d0a022dd4777b6da661443691ff8.png_pic_center]: https://img-blog.csdnimg.cn/e5d6d0a022dd4777b6da661443691ff8.png#pic_center
[d31209fd27ec4391aa343408b2b7e840.png_pic_center]: https://img-blog.csdnimg.cn/d31209fd27ec4391aa343408b2b7e840.png#pic_center