vue-03-路由

客官°小女子只卖身不卖艺 2023-07-20 05:48 6阅读 0赞

相比于a标签的点击即跳转页面、刷新页面操作，vue路由更完善，点击不会执行跳转或刷新操作。只是进行路由间的跳转。

1、安装路由模块  [https://router.vuejs.org/zh/][https_router.vuejs.org_zh]

npm install vue-router

2、在 main.js 内部引入 vueRouter 模块，且使用 Vue.use()，来明确的安装路由功能

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

3、在components文件夹下，新建 .vue文件，作为路由，且在 main.js  文件内部引入这些路由文件

![20200331193604491.png][]

4、将引入的路由，配制成路由数组。

路由现在被定义为一个在 router 实例里的一个 [routes 选项][routes]数组。所以这些路由会以这种方式定义：routes ：一个数组，数组里面每一项都是对象，且每一项path对应的当前页面在浏览器地址栏的地址，可以自定义，随便写，后面的component则是对应的引入的组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70][]

5、router初始化。不再会有一个特殊的 API 用来初始化包含 Vue Router 的 app ，你只需要传一个路由属性给 Vue 实例：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 1][]

6、我想要我的页面显示，需要在我的根文件上来使用 <router-view></router-view> ，以此来将其与组件的内容全部加载到页面。

![20200331194628866.png][]

7、导航，若是像以前一样使用a标签作为导航，那么页面还是会刷新跳转

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 2][]

所以，使用vue自带的页面跳转标签  <router-link to="/">home</router-link>  来替代a标签，其中 to 后面接的就是路由定义时候的路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 3][]

此时，在app根组件，会存在两个可点击的按钮，分别是 home 和 helloworld ，点击按钮的时候，在浏览器地址栏可以看到，地址改变了，然后显示的页面也改变了，但是，你会发现页面并没有刷新，这就是路由的跳转区别于 a 标签跳转的地方。

[https_router.vuejs.org_zh]: https://router.vuejs.org/zh/
[20200331193604491.png]: /images/20230528/3387882379da4f22a60c9412523dbdc6.png
[routes]: https://router.vuejs.org/zh-cn/essentials/getting-started.html#javascript
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70]: /images/20230528/2d8de9c6c3d04c2b9518a0118b820f6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 1]: /images/20230528/4d49a4f3e7f744a5b82692cfc7c79971.png
[20200331194628866.png]: /images/20230528/9468f284621d4f638365e5b17334f588.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 2]: /images/20230528/708c11ad2de148679439d2a0da30e766.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzkyODAw_size_16_color_FFFFFF_t_70 3]: /images/20230528/b1910c7127234d2bb243e4890719d733.png