# vue中路由的基本使用 # 通过方法进行路由跳转 this.$router.push() - ``` <pre class="calibre15">``` 跳转到指定url的路径 并向history栈中添加一个记录 点击后退会返回到上一个页面 ``` ``` this.$router.replace() - 跳转到指定url路径 但是history栈中不会有记录 点击返回不会跳转到上个页面 this.$router.go(n) - ``` <pre class="calibre15">``` 向前或向后跳转n个页面 n为正整数或负整数 ``` ``` # router-link中拼接字符串 `<router-link :to =" '/user/'+userId">用户</router-link>` # 获取路由上面的参数值 在方法中 this.$route当前那个路由处于活跃状态 就是拿到的是哪个路由 在注册路由的时候: { path: '/user/:userId' } this.$route.params.userId 就可以拿到路由地址中userId的参数值 如果注册路由 { path:'/user/:abc' } 使用 this.$route.params.abc 就可以拿到路由的参数值 在模板中: `<h2>{{$route.params.abc}}</h2>` 比如 正常我们在方法中设置 this.message = '223'在模板中采用{{message}}进行调用 # 路由懒加载 > 路由中会定义很多不同的页面 > 这个页面一般情况下 是打包放在一个js文件中 > 如果我们一次性从服务器请求下来这个页面 可能需要花费一定的时间 甚至用户的电脑还出现了短暂的空白的情况 > 如何避免? 使用路由懒加载就可以了 # 路由懒加载做了什么? 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块 只有在这个路由被访问到的时候 才加载对应的组件 # 怎么使用: 使用箭头函数就可以实现:  # 路由嵌套 > 步骤 > 创建对应的子组件 并且在路由映射中配置对应的子路由 > 在组件内部使用标签 > 定义路由子路由格式,例如: > path: '/home', > component: Home, > children: \[ > { > path: 'news' > }, > { ``` <pre class="calibre13">``` <span class="token1">}</span> ``` ``` \] # 路由传递参数: > 第一种 router-link 绑定路径和参数 然后用this.route.params获取参数 > 第二种 router-link :to = 对象 对象中设置path和query对象 query对象中设置参数 >  > 点击的时候 路由变成了路径?name =why&age=18&height=1.88 > 获取路由的信息 就是this.$route.query > 上面是通过router-link传递参数 下面是通过button传递参数 > 方法中使用this.$router.push(路径+参数(this.userId)) push 里面也可以使用对象