作用:可以简化路由的跳转。
不借助
<router-link>
实现路由跳转,让路由跳转更加灵活 除了使用
<router-link>
创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。在路由器中的路由中进行使用,name:“xxx,爱叫什么叫什么,你叫yupi也无所谓,英文”
-
使用name命名路由后,我们第一件事情就是去使用了对应路由的地方进行修改
- 比如我们原本是,现在就不是路径了,现在得变成名字了=>
- 注意点:to前面多了冒号,是变成响应式的标记,然后写法变为对象形式
-
稍微提一嘴的a标签(这个router-link会自动转化为a标签,但是跟你直接使用a标签是不一样的,使用router-link的才会是单页面,如果直接使用a标签的话,那其实实际感官上是会抖动一下,然后会刷新页面)
<a href="/reg">rrr</a>
没错啦,上面都是铺垫,接下来才是编程式的路由导航
写法
命名路由
除了 path
之外,你还可以为任何路由提供 name
。这有以下优点:
- 没有硬编码的 URL
params
的自动编码 / 解码。- 防止你在 url 中出现打字错误。
- 绕过路径排序(如显示一个)
步骤
-
引入useRouter
import {useRouter} from 'vue-router'
-
使用router
const router = useRouter()
-
字符串用法
//import { useRouter } from 'vue-router' //const router = useRouter() //请注意,这个toPage是一个按钮,在页面中使用@click进行绑定 const toPage = () => { router.push('/reg') } //TS写法 const toPage = (url:string) => { router.push(url)//这种写法的话就需要自己在上面@click="toPage('这里传入路径')",进行配置了 }
-
对象模式
import { useRouter } from 'vue-router' const router = useRouter() const toPage = () => { router.push({//对象形式的写法 path: '/reg'//path是路径,这里一样是写死了,可以将参数传进来 }) }
-
命名式写法
import { useRouter } from 'vue-router' const router = useRouter() const toPage = () => { router.push({ name: 'Reg'//这里需要注意,在前面设置的也需要进行修改,不能够再传入url了,因为我们这里是命名式写法,需要传入命名(此处是写死的做法,下面是传值式的写法) }) } const toPage = (Name:string) => {//TS写法,不用TS写法的话写个Name就行了 router.push({//一样是对象形式写法 name: Name//传值式写法 }) }