vue路由、传参、接收方式、跳转、router、path、name、router-link、to、replace、push、query、params

---

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这很重要。

---

4、相关链接

1、PHP-vue路由跳转方式有哪些
2、CSDN-vue页面跳转的三种方式