vue-router4 (三) 路由导航的2种方法

本文主要是介绍vue-router4 (三) 路由导航的2种方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

const routes:Array<RouteRecordRaw> = [{path:"/",   //路径name:"Login",    //路由名称component:()=>import("../components/login.vue") //组件名，此处懒加载方式},{path:"/reg",name:"Reg",component:()=>import("../components/reg.vue")},
]

1.使用router-link 标签导航

（1）to属性后是字符串（ to="path路径"）：

<router-link to="/reg">Reg</router-link>

 （2）to属性后是对象（:to="name路由名称", 必须是属性绑定的形式，即必须是 ":to"）

<router-link :to="{name:'Reg'}">Reg</router-link>

2.使用router.push()方法导航

必须先引入路由钩子：

import { useRouter } from 'vue-router';
const router = useRouter();

（1） router.push()中是字符串（对应path路径）：

<button @click="toPage()">reg</button>const toPage= ()=>{router.push("/reg")   
}

（2） router.push()中是对象

①跳转到对应路径的路由

<button @click="toPage('/reg')">reg</button>
//传path路径const toPage = (url:string)=>{router.push({path:url   //传过来path路径})}

②跳转到对应名称的路由

<button @click="toPage('Reg')">reg</button>
//传路由名称const toPage = (url:string)=>{router.push({name:url  //传过来的路由名称})}

这篇关于vue-router4 (三) 路由导航的2种方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---