路由基础知识
router和route的区别
route，是一个路由。
{ path: '/a', component: A }
routes，是一组路由。
const routes = [
{ path: '/a', component: A },
{ path: '/b', component: B }
]
router，是一个管理者，它管理了一组route。
const router = new VueRouter({
routes // routes: routes 的简写
})
我举一个形象化的例子：route就好比一座房子，routes就好比一排房子，router就是一个手里有钥匙的人。你想进入哪个房子，就拿着对应的钥匙进去。你想往哪个屋子里放什么东西，你就带着东西进去。
这样一来，我觉得你应该可以区分开router和route了。
当你想要使用编程时导航传参跳转页面的时候，是用router。也就是说人拿着对应的钥匙开门的动作。
当你想获取并使用接收到的参数的时候，是用route。也就是说这些参数都是房子里的物品。
为什么可以在组件中使用$router和$route
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在main.js文件中，你将router对象引入，并且将它用作了vue实例的属性，所以你可以在组件中使用this.$router和this.$route。
编程式导航
params传参和query传参的区别
1、params相当于post请求，参数不会在地址栏显示；
query相当于get请求，参数会显示在地址栏。
2、/data/:id匹配/data/1、/data/2,params为路径；
/data?id=1、/data?id=2，query为参数。
3、刷新页面时，params参数有可能会消失，query不会消失。
当使用下述方式一传参时，params参数会消失；
当使用下述方式二传参时，params参数不会消失；
总结：
1、一般不重要的参数都使用query传参
2、必要的数据通过传参来实现，能从接口获取的数据就直接调接口
通过params接收参数
方式一
路由配置
{
path: '/one',
name: 'One',
component: One
}
传参组件
<button @click=one> one </button>
one() {
this.$router.push({
name: "One",
params: { id: 1 }
});
},
接收参数组件
this.$route.params.id
方式二
路由配置
{
path: '/two/:id',
name: 'Two',
component: Two
}
传参组件
<button @click=two(2)> two </button>
two(id) {
this.$router.push({
path: `/two/${id}`
});
}
接收参数组件
this.$route.params.id
通过query接收参数
方式一
路由配置
{
path: '/three',
name: 'Three',
component: Three
}
传参组件
<button @click=three> three </button>
three() {
this.$router.push({
path: '/three',
query: { id: 3 }
});
},
接收参数组件
this.$route.query.id
方式二
路由配置
{
path: '/four',
name: 'Four',
component: Four
}
传参组件
<button @click=four> four </button>
four() {
this.$router.push({
name: "Four",
query: { id: 4 }
});
}
接收参数组件
this.$route.query.id
动态路由
动态路由也就是通过params接收参数的第二种方式，在这里我主要介绍一下使用这种方式如何传多个参数。
路由配置
{
path: '/two/:id/:name',
name: 'Two',
component: Two
}
传参组件
<button @click=two()> two </button>
two() {
this.$router.push({
path: "/two/2/lee"
});
}
接收参数组件
this.$route.params.id
this.$route.params.name
数组对象类型参数
传递参数页面
let tempArr = encodeURIComponent(JSON.stringify(this.paramsArr));
this.$router.push({
path: '/page',
query: {
selectionArr: tempArr
}
})
接收参数页面
if (this.$route.query !== null) {
if (this.$route.query.selectionArr) {
let parse = decodeURIComponent(this.$route.query.selectionArr)
this.list = JSON.parse(parse)
}
}
获取当前页面路由
完整url可以用 window.location.href
路由路径可以用 this.$route.path
路由路径参数 this.$route.params
