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 //传过来的路由名称})}