vue中路由router配置步骤详解

官方文档地址：

入门 | Vue Router

一、vue中的路由作用

vue的主要思想是组件化开发，路由用来配置组件对应展示路径，比如

二、vue中的路由router 使用步骤

创建路由文件——使用路由——配置路由出口，使路由配置内容展示在页面上

（1）创建路由文件：一般路由文件单独放在router文件夹

在src目录下，创建router文件夹，文件夹下，创建index.js，用来实现路由的创建。

vue中的router 需要用到vue  和vue-router 两个依赖，请看一下代码

 （2）使用路由

【1】在main.js 中引入路由文件： import router from './router'，  注意router  不要变且为小写

【2】注册路由（因为main.js是程序的主入口，在里面注册后，程序运行起来才会自动读取路由信息），请看以下代码

 （3）配置路由出口，使路由中的组件内容展示在页面上

在App.vue中，添加  <router-view></router-view>  用来展示路由配置组件的内容，示例如下

以上都配置完后，运行程序，即可。

以上路由配置完后，怎么在代码中实现路由跳转呢？

三、路由跳转

1、带参数路由跳转：

（注意路由跳转用$router  ，路由取参用：$route）

（1）this.$router.push()  ：

跳转到指定url路径，并向history栈中添加一个记录，点击后退会返回到上一个页面

  【1】带参数：页面通过path和query传递参数，（刷新页面后参数不会丢失，query传参的参数会带在url后边展示在地址栏(/home?user=test)，类似get请求）

           目标页面通过this.$route.query获取参数

          示例：

                        跳转path=‘/home’的路由并且传递参数selected=1  ：

                                  this.$router.push({path: '/home', query: {selected: "2"}});

                       目标页面获取selected参数：

                                  this.$route.query.selected

【2】带参数：页面通过path和params,name和path传递参数 （刷新页面后参数会丢失,url参数不展示在地址来，类似post请求）

       （1）在给指定路由名称的路由，传递参数，即通过name和path传递

                        跳转name=‘register’的路由并且传递参数user=测试用户  ：

                                this.$router.push({name: 'register', params: {user: '测试用户'}});         
                目标页面获取user参数值：

                                 this.$route.params.user

示例：

找到router文件中name='register'路由：

在src/view/register/index.vue  中取参数

（2）给指定路由地址，传递参数  ，即通过path和params传递参数

  传参：this.$router.push({path: '/register', params: {user: '测试用户'}});       

 取参： $router.params.user

（2）this.$router.replace()  ：

this.$router.replace使用方式与this.$router.push基本一致，只是this.$router.replace不会在history中添加记录，而是替换掉history的记录，无法通过浏览器的返回功能回到上一个页面，一般用来在登出系统时使用

注意：push方法也可以传replace this.$router.push({path: '/homo', replace: true})

总结：

params和query传递方式的区别是：query参数在地址栏可以看到，可以获取到，类似get请求；params参数在地址栏看不到，参数，只能第一次进入获取到，刷新页面后，参数会丢失，类似post请求。

push和replace区别：push地址保存在history栈中，有历史地址记录，通过this.$router.go(n)，可以返回到上一步；replace是直接替换当前页面地址，没有历史地址记录。

2、不带参数路由跳转

this.$router.push('/home')     

this.$router.push({name: 'home'});

this.$router.push({path: '/home'});

3、this.$router.go(n)

向前或向后跳转n个页面，n可以为正整数或负整数，一般用this.$router.go(-1)来返回上一个页面

四、标签路由

<router-link to='需要跳转到的页面的路径></router-link>

浏览器在解析时，将它解析成一个类似于 < a > 的标签

五、路由元：

路由元，通过meat属性，可以将任何信息附加到路由上，可以判断谁可以访问路由及控制是否访问组件。

格式：           meta:{

                        变量名1：变量值,

                        变量名2：变量值,

                     }

场景：比如在前端开发中，自定义的页脚组件，不想在注册页面展示，在首页展示，可以通过设置meta来实现，

【1】给router/index.js 路由文件中，添加meta属性，自定义名称showfooter 来区分是否展示，实现：当打开/home 主页时，显示页脚；打开/register 注册页面时，不显示页脚

【2】修改App.vue  中的页脚组件，增加v-show属性，通过路由配置中的meta.showfooter,控制Footer页脚组件的显示隐藏。v-show="true" 显示，v-show="false" 隐藏

六、路由使用的坑

安装路由依赖  npm install --save vue-router  ，这么安装后，容易出现 export 'default' (imported as 'VueRouter') was not found in 'vue-router' 警告，导致路由失效，这是因为，npm install --save vue-router 默认安装的是最新版本的路由，打开根目录的package.json文件，查看dependencies 中的vue-router版本，如果是最新的版本4.x.x ，重新安装3版本后再进行测试,就可以运行了. 

  重新安装3版本：npm install --save vue-router@3.1.3

到此这篇关于vue中路由router配置详解的文章就介绍到这了,更多相关vue路由router配置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论