第二章——命名路由-编程式导航

作用：可以简化路由的跳转。

​ 不借助<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 中出现打字错误。
• 绕过路径排序（如显示一个）

步骤

1. 引入useRouter

   import {useRouter} from 'vue-router'
   

2. 使用router

   const router = useRouter()
   

3. 字符串用法

   //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('这里传入路径')"，进行配置了
   }
   

4. 对象模式

   import { useRouter } from 'vue-router'
   const router = useRouter()
    
   const toPage = () => {
     router.push({//对象形式的写法
       path: '/reg'//path是路径，这里一样是写死了，可以将参数传进来
     })
   }
   

5. 命名式写法

   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//传值式写法
     })
   }