[JavaScript知识库]vue中路由相关知识点

一、路由之间是怎么跳转的？有哪些方式？

1. < router-link to=“需要跳转到页面的路径” >
2. this.$router.push() 跳转到指定的 url，并在 history 中添加记录，点击回退返回到上一个页面
3. this.$router.replace()跳转到指定的 url，但是 history 中不会添加记录，点击回退到上上个页面
4. this.$router.go(n) 在 history 记录中向前或者后退多少步

解析：vue-router官方文档

二、Vue-Router 怎么配置路由？

1. 安装

npm install --save Vue-Router

2. 引用

import VueRouter from 'Vue-Router

3. 配置路由文件

var router = new VueRouter({ 
 routes:[ 
  { path:"/hello", 
    component:HelloWorld 
  },
  {
   path:"/wen", 
   component:HelloWen ‘n



’new Vue({ el: '#app', components: { App }, router, template: '<App/>' })

三、query 和 params 之间的区别是什么？

1. query 要用 path 来引入，params 要用 name 来引入
2. 接收参数时,分别是 this.$route.query.name 和 this.$route.params.name

四、$route 和$router 的区别是什么？

1. $router 为 VueRouter 的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如 history 对象，经常用的跳转链接就可以用 this.router.push 会往 history 栈中添加一个新的记录。返回上一个 history 也是使用$router.go 方法
2. $route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched， name 等路由信息参数。
   解析：路由对象属性官方说明

• $route.path
  • 类型: string
  • 字符串，对应当前路由的路径，总是解析为绝对路径
• $route.params
  • 类型: Object
  • 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
• $route.query
  • 类型: Object
  • 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
• $route.hash
  • 类型: string
  • 完成解析后的 URL，包含查询参数和 hash 的完整路径。
• $route.fullPath
  • 类型: string
  • 完成解析后的 URL，包含查询参数和 hash 的完整路径。
• $route.matched
  • 类型: Array
  • 一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
• $route.name
  • 当前路由的名称，如果有的话。
• $route.redirectedFrom
  • 如果存在重定向，即为重定向来源的路由的名字。