Vue路由简介【vue-router】

淩亂°似流年 2024-05-03 14:33 70阅读 0赞

![在这里插入图片描述][e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]

#### 文章目录 ####

*  前言
 *  vue-router的理解
 *  对SPA应用的理解
 *  路由的理解
 *   *  什么是路由？
     *  路由分类
 *  安装和使用vue-router
 *  使用vue-router的步骤：

## 前言 ##

> ?前言?  
> ?博客：【无聊大侠hello word】?  
> ✍有一点思考，有一点想法，有一点理性！✍  
> ✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍

## vue-router的理解 ##

*  Vue的一个插件库，专门用来实现 SPA应用

## 对SPA应用的理解 ##

1.  单页Web应用(single page web application,SPA)。
2.  整个应用只有 一个完整的页面。 
3.  点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
4.  数据需要通过ajax请求获取。

## 路由的理解 ##

### 什么是路由？ ###

1.  一个路由就是一组映射关系(key-value)
2.  key为路径，value可能是function或component

### 路由分类 ###

1.  后端路由：
    
    1） 理解：value是function,用于处理客户端提交的请求。
    
    2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求返回响应数据。
2.  前端路由：
    
    1）理解：value是component,.用于展示页面内容。
    
    2）工作过程：当浏览器的路径改变时，对应的组件就会显示。

## 安装和使用vue-router ##

1.  安装vue-router

npm install vue-router --save

1.  在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）
    
    1）导入路由对象，并且调用Vue.use(VueRouter)
    
    2）创建路由实例，并且传入路由映射配置
    
    3）在Vue实例中挂载创建的路由实例

![在这里插入图片描述][177d924400e84119af21724828339fae.png]

## 使用vue-router的步骤： ##

1.  创建路由组件

> src/components/About.vue

<template>
    	<h2>我是About的内容</h2>
    </template>
    
    <script>
    	export default {
          
    		name:'AboutDemo'
    	}
    </script>

> src/components/Home.vue

<template>
    	<h2>我是Home的内容</h2>
    </template>
    
    <script>
    	export default {
          
    		name:'HomeDemo'
    	}
    </script>

1.  配置路由映射：组件和路径映射关系

![在这里插入图片描述][4dc8c36318874980bcd0ac81e8327e5a.png]

// 该文件专门用于创建整个应用的路由器
    import VueRouter from 'vue-router'
    //引入组件
    import About from '../components/About'
    import Home from '../components/Home'
    
    //创建并暴露一个路由器
    export default new VueRouter({
        
    	routes:[
    		{
        
    			path:'/about',
    			component:About
    		},
    		{
        
    			path:'/home',
    			component:Home
    		}
    	]
    })

1.  使用路由：通过`<router-link>`和`<router-view>`

![在这里插入图片描述][efc5d0a6d01b47c88bc67d89789d9bf3.png]

<template>
      <div>
        <div class="row">
          <div class="col-xs-offset-2 col-xs-8">
            <div class="page-header"><h2>Vue Router Demo</h2></div>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-2 col-xs-offset-2">
            <div class="list-group">
    					
              
              
    
    					
    					<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
              <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
            </div>
          </div>
          <div class="col-xs-6">
            <div class="panel">
              <div class="panel-body">
    						
                <router-view></router-view>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    	export default {
        
    		name:'App',
    	}
    </script>

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**

[e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/630c8a81d09c463c8009087a9da43cbd.gif
[177d924400e84119af21724828339fae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/7f1240a256a94de2ad4b3fde709def4d.png
[4dc8c36318874980bcd0ac81e8327e5a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/842d5e2f311044b98fa0bbacc812ec9a.png
[efc5d0a6d01b47c88bc67d89789d9bf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/c2c883cd92714427bd7426369311d135.png