vue-router params与query使用及区别

前置知识

url的语法

大多数的url都是由9个部分组成

<scheme>://<user>:<password>@<host>:<port>/<path><params>?<query>#<frag>

• scheme方案名称即协议名称,表示用哪种协议访问服务器，如http、https
• user用户：某些方案访问资源时需要的用户名，有些服务器要求输入用户名密码才会允许用户访问数据，如ftp
• password密码
• host服务器主机标明资源所在服务器，可以用ip也可以用域名，如果不需要提供user和password,则@省略
• port端口表示服务器正在监听的网络端口，即应用部署占用的端口号，默认80
• path路径：表明资源所在服务器路径如/seas/index.html
• params参数
• query查询字符串：可以通过地址栏的查询参数来缩小查询范围，用？来与前面做区分，采用key=value的方式，如果有多组查询参数中间用&区分如xx?name=‘san’&age=‘18’
• frag片段：有些资源我们可以定位到具体的章节或片段，http服务器通常只处理整个对象，而不是对象的片段，所以这个片段更多的是浏览器在做，浏览器从服务器获取整个资源之后，会根据片段来显示感兴趣的内容，也就是我们之前说的锚点。

vue-router基本知识

1. 路由配置的时候主要参数有name路由别名，path路由地址，component映射的组件，还有别的我们案例里用不到就没有展开。
2. 如果是动态路由需要在path利用占位符占位

query

<router-link :to="{ name: 'W', query: { id:'1234'，age:'12' }}"/>
<router-link :to="{ path: '/W', query: { id:'1234',age:'12' }}"/>

路由配置

//router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
  path: '/hhhhhhh',
  name: 'W',
  component: W
},{
  path: '/W', 
  name: 'hhhhhhhh',
  component: W
}
]

const router = new VueRouter({
    mode:'hash',
    routes
})

export default router

结论：query与name、path都可以搭配使用

如果是name与query,则会根据name找到path并把path拼接到url上

http://localhost:8080/#/hhhhhhh?id=1234&age=12

如果是path与query，直接将path匹配到路由上
http://localhost:8080/#/W?id=1234&age=12

获取到时候可以用this.$route.query.id来获取到具体到查询参数

params

<router-link :to="{name:'webHomeB',params:{method:'name',type:'params'}}">Home(name与params)</router-link>
<router-link :to="{path:'/home',params:{method:'path',type:'params'}}">Home(path与params)</router-link>

路由配置：

//router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [{
    path:'/home',
    name:'webHome',
    component:webHome
},{
    path:'/home/:method/:type',
    name:'webHomeB',
    component:webHome
}
]

const router = new VueRouter({
    mode:'hash',
    routes
})

export default router

this.$route的内容
Home(name与params)：http://localhost:8080/#/home/name/params

fullPath: "/home/name/params"
hash: ""
matched: [{…}]
meta: {}
name: "webHomeB"
params: {method: "name", type: "params"}
path: "/home/name/params"
query: {}

Home(path与params)：http://localhost:8080/#/home

fullPath: "/home"
hash: ""
matched: [{…}]
meta: {}
name: "webHome"
params: {}
path: "/home"
query: {}

结论：params只能与name搭配使用

params可以理解为动态路由，也就是地址栏中的地址是动态变化的，所以在path的时候就需要占位且变量占位后不能发生变更。所以可以看到params要求更加严格一些。

获取使用this.$route.params.method来获取

总结

通过上述知识的了解我们总结出以下几点：

• params可以理解为动态路由，即path存在变化（非请求参数或者说?前面的地址存在变化）
• query可以理解为查询参数，不会改变改变路由path，只是在后面拼接参数
• params因为path会被改变，因此只能与name搭配使用，且path中需要提前定义占位符如：id,获取的时候必须用$route.params.id获取
• query可以与name、path搭配使用，使用this.$route,query[xx]进行获取

思考

• path没有占位符占位但利用name与params进行导航，地址栏是否有变化？无变化，需要path处用变量占位才可以生效
• 如果path有动态路由且需要有查询参数应该如何处理？目前看是没有见到此类需求，小伙伴如果有结论也可以评论想学习一下