前置知识
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基本知识
- 路由配置的时候主要参数有name路由别名，path路由地址，component映射的组件，还有别的我们案例里用不到就没有展开。
- 如果是动态路由需要在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有动态路由且需要有查询参数应该如何处理？目前看是没有见到此类需求，小伙伴如果有结论也可以评论想学习一下
|