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

目录

  • 1、router-link(声明式)
    • 1.1、不带参数
    • 1.2、携带参数
  • 2、API(编程式或命令式)
    • 2.1、this.$router.push()
      • 2.1.1、不带参数
      • 2.1.2、query传参
      • 2.1.3、params传参
    • 2.2、this.$router.replace()
    • 2.3、this.$router.go(n)
    • 2.4、三者的区别
  • 3、配置路由
    • 3.1、路径传参(参数就是路径的一部分,可变的路径)
    • 3.2、name和params
    • 3.3、path和query
  • 4、相关链接


1、router-link(声明式)

1.1、不带参数

html

namepath都行,建议用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
queryparams区别
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页面跳转的三种方式

你可能感兴趣的:(Vue,web,vue.js,前端)