命名路由
除了 path 之外，你还可以为任何路由提供 name。这有以下优点：
- 没有硬编码的 URL
- params 的自动编码/解码。
- 防止你在 url 中出现打字错误。
- 绕过路径排序（如显示一个）
const routes:Array<RouteRecordRaw> = [ { path:"/", name:"Login", component:()=> import('../components/login.vue') }, { path:"/reg", name:"Reg", component:()=> import('../components/reg.vue') } ]
router-link跳转方式需要改变 变为对象并且有对应name
<h1>小满最骚</h1> <div> <router-link :to="{name:'Login'}">Login</router-link> <router-link style="margin-left:10px" :to="{name:'Reg'}">Reg</router-link> </div> <hr />
编程式导航
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。
1.字符串模式
import { useRouter } from 'vue-router' const router = useRouter() const toPage = () => { router.push('/reg') }
2.对象模式
import { useRouter } from 'vue-router' const router = useRouter() const toPage = () => { router.push({ path: '/reg' }) }
3.命名式路由模式
import { useRouter } from 'vue-router' const router = useRouter() const toPage = () => { router.push({ name: 'Reg' }) }
a标签跳转
直接通过a href也可以跳转但是会刷新页面
<a href="/reg">rrr</a>
