vue-路由配置和使用步骤整理

左手的ㄟ右手 2024-04-18 14:43 76阅读 0赞

#  #

# [vue-路由配置和使用步骤整理][vue-] #

## **介绍** ##

路由：控制组件之间的跳转，不会实现请求、不用页面刷新，直接跳转-切换组件》》》

## 安装 ##

本地环境安装路由插件vue-router： cnpm install vue-router --save-dev

\*没有安装淘宝镜像的可以将 **cnpm** 替换成 **npm**

想要安装的可以看这篇文章[http://www.cnblogs.com/padding1015/p/7162024.html][http_www.cnblogs.com_padding1015_p_7162024.html]，（打开搜索 **镜像** 即可跳转到对应位置）

## 配置 ##

两种配置方法：在main.js中 || 在src/router文件夹下的index.js中

这里只说在**src/router/index.js**中的

1.  引入：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>import</code>&nbsp;<code>Vue from&nbsp;</code><code>'vue'</code></p> <p>&nbsp;</p> <p><code>import</code>&nbsp;<code>Router from&nbsp;</code><code>'vue-router'</code></p> </td> 
  </tr> 
 </tbody> 
</table>

注意这个Router是自定义的名字，这里叫这个名字后，下边都要用到的

2. 使用/注册：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>Vue.use(Router)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

3. 配置

配置路由：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> </td> 
   <td> <p><code>export</code>&nbsp;<code>default</code>&nbsp;<code>new</code>&nbsp;<code>Router({ </code></p> <p><code>&nbsp;&nbsp;</code><code>routes: [</code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>path : ‘/’,&nbsp;&nbsp;</code><code>//到时候地址栏会显示的路径</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name : ‘Home’,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>component :&nbsp; Home&nbsp;&nbsp;&nbsp;</code><code>// Home是组件的名字，这个路由对应跳转到的组件。。注意component没有加“s”.</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>path : ‘/content’,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name : ‘Content’,</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>component :&nbsp; Content</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>],</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>mode:&nbsp;</code><code>"history"</code></p> <p><code>})</code></p> </td> 
  </tr> 
 </tbody> 
</table>

4. 引入路由对应的组件地址：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>import</code>&nbsp;<code>Home from&nbsp;</code><code>'@/components/Home'</code></p> <p>&nbsp;</p> <p><code>import</code>&nbsp;<code>Home from '@/components/Content’</code></p> </td> 
  </tr> 
 </tbody> 
</table>

5. 在main.js中调用index.js的配置：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>import</code>&nbsp;<code>router from&nbsp;</code><code>'./router'</code></p> </td> 
  </tr> 
 </tbody> 
</table>

6. App.vue页面使用（展示）路由：

把这个标签放到对应位置：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;router-view&gt;&lt;/router-view&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

7. 路由切换（原来的<a href=”XXX.html”>等地方）：把切换标签和链接改成：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>&lt;router-link&nbsp; to=</code><code>"/"</code><code>&gt;切换到Home组件&lt;/router-link&gt;</code></p> <p>&nbsp;</p> <p><code>&lt;router-link&nbsp; to=</code><code>"/content"</code><code>&gt;切换到Content组件&lt;/router-link&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

//这里，to里边的参数和配置时，path的路径一样即可

贴一个源码：

main.js

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][] main.js

src/router/index.js

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][] src/router/index.js(router的主要配置文件)

App.vue 展示Vue

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][] App.vue 的router-view 标签

导航页面的路由链接设置，用于切换组件

![aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm][] NavBar.Vue页面，主要用于页面切换的导航组件

[vue-]: https://www.cnblogs.com/padding1015/p/7884861.html
[http_www.cnblogs.com_padding1015_p_7162024.html]: http://www.cnblogs.com/padding1015/p/7162024.html
[aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMuY25ibG9ncy5jb20vT3V0bGluaW5nSW5kaWNhdG9ycy9Db250cmFjdGVkQmxvY2suZ2lm