目录
1、router-link（声明式）
1.1、不带参数
html
name，path都行，建议用name。
注意：router-link中链接如果是斜杠/开始，那么就是从根路由开始，如果开始不带斜杠/，则从当前路由开始。
<router-link :to="{ path: '/home' }"></router-link>
<router-link :to="{ name: 'home' }"></router-link>
1.2、携带参数
query传参数类似于get请求，url后面会显示参数，可以不配置路由。
params传参数类似于post请求，路由配置path: "/home/:id"或者path: "/home:id"。不配置path，第一次可请求，刷新页面id会消失，配置path，刷新页面id会保留。
html
<router-link :to="{ path: 'Detail', query: { id: 1 } }">前往Detail页面</router-link>
<router-link :to="{ name: 'Detail', params: { id: 2 } }">前往Detail页面</router-link>
html取参
$route.query.id
$route.params.id
script取参
this.$route.query.id
this.$route.params.id
2、API（编程式或命令式）
2.1、this.$router.push()
2.1.1、不带参数
this.$router.push('/home');
this.$router.push({
path: '/home' });
this.$router.push({
name: 'home' });
2.1.2、query传参
this.$router.push({
path: '/home', query: {
id: '1' } });
this.$router.push({
name: 'home', query: {
id: '1' } });
html获取参数
this.$route.query.id
script获取参数
this.$route.query.id
2.1.3、params传参
路由配置
path: "/home/:id"或者path: "/home:id"，不配置path，第一次可请求,刷新页面id会消失；配置path，刷新页面id会保留。只能用name。
query和params区别
query类似get请求，跳转之后页面url后面会拼接参数，类似?id=1，非重要性的可以这样传，刷新页面id会保留。
params类似post请求，跳转之后页面url后面不会拼接参数，但是刷新页面id会消失。
this.$router.push({
name: 'home', params: {
id: '1' } });
2.2、this.$router.replace()
用法与
push相同。
2.3、this.$router.go(n)
this.$router.go(n);
2.4、三者的区别
this.$router.push
跳转到指定url路径，并向history栈中添加一个记录，点击后退会返回到上一个页面。
this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面，就是直接替换了当前页面。
this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数。
3、配置路由
3.1、路径传参（参数就是路径的一部分，可变的路径）
html
<div @click="skips(1)">查看详情</div>
JavaScript
methods: {
skips(id) {
// 直接调用$router.push实现携带参数的跳转
this.$router.push({
path: `/details/${
id}`
});
// this.$router.push(
// `/monitor/service-record?serviceName=${this.query.serviceName}`
// );
}
}
路由配置
{
path: '/details/:id',
component: details
}
接收
this.$route.params.id
3.2、name和params
通过路由属性中的name来确定匹配的路由，通过params来传递参数。页面刷新，数据会丢失。
html
<div @click="skips(2)">查看详情</div>
JavaScript
methods: {
skips(id) {
this.$router.push({
name: 'details',
params: {
id }
});
}
}
路由配置
{
name: 'details',
component: details
}
接收
this.$route.params.id
3.3、path和query
使用path来匹配路由，然后通过query来传递参数，query传递的参数会显示在url后面?id=××。页面刷新，数据会丢失。
html
<div @click="skips(3)">查看详情</div>
JavaScript
methods：{
skips(id) {
this.$router.push({
path: '/details',
query: {
id }
})
}
}
路由配置
{
path: '/details',
name: 'details',
component: details
}
接收
this.$route.query.id
注意：在组件中获取参数的时候使用route.params而不是router这很重要。