RouterLink

to/path/path1?name田本初age23/RouterLink如果参数值为变量需要使用模版字符串。

let

:to/path/path1?name${str}age23/RouterLink2.接收与使用

import

to不再传递字符而是传一个对象由于参数为对象所以to前需要加上:

RouterLink

params参数需要在路由规则中提前声明参数名参数名前不要丢失冒号

这里给

添加了name和age参数由于age后添加了问号所以age为可传参数否则未传age会报错。

Comp1children:[{

path:path1/:name/:age?,component:

Comp2

to/path/path1/田本初/23/RouterLink参数值如果是变量使用模版字符串

let

:to/path/path1/${str}/23/RouterLink2.接收与使用

import

to不再传递字符而是传一个对象由于参数为对象所以to前需要加上冒号

如果使用path会报警告

}/正确写法路径使用name注意name需保持与路由规则中的一致。

路由规则配置

name:path1Name,path:path1/:name/:age,component:

Comp2

不同于声明式导航编程式导航是函数形式相比于声明式导航的标签更加灵活。

引入useRouterrouter有两种方式分别为push和replacepush会保留历史记录replace不会保留历史记录参数对象与声明式导航的对象写法一致。

import

如果解构使用query/params对象由于是直接从响应式数据中解构变量会丢失响应式需要使用toRefs。

import

方式一将路由收到的所有params参数作为props传给路由组件

路由规则中添加

}使用参数时defineProps([‘name’,‘age’])

name

}}/div方式二方式一只能处理params参数如果想处理query参数需要写成函数形式

路由规则中添加props函数

}使用参数时defineProps([‘name’,‘age’])

name

路由导航分为声明式导航和编程式导航声明式导航就是RouterLink标签编程式导航就是函数形式。

编程式导航有两种方式push和replace其中push会保留历史记录(浏览器可回退)replace不会保留历史记录。

query参数和params参数均有「拼接字符串写法」和「对象写法」但更推荐使用to传对象的方式。

query拼接字符串在路径后添加

?参数名参数值多组参数间以分隔。

params拼接字符串在路径后直接

/参数值即可但需要在路由规则中提前声明参数名格式为path/:参数名如果为可选参数在参数名后添加问号。

对象写法中query参数既可以使用path又可以使用name但是params参数只能使用name。