router-link

在vue的开发中使用自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

 <!--使用 router-link 组件进行导航 -->
 <!--通过传递 `to` 来指定链接 -->
 <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
 <router-link to="/">Go to Home</router-link>
 <router-link to="/about">Go to About</router-link>

router-view

router-view 是一个容器组件可以显示与 url 对应的组件。可以把它放在任何地方，以适应你的布局。

 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>

完整的一个vue-router文件

1. 定义路由组件
   路由组建就是代码中的vue页面

   const Home = { template: '<div>Home</div>' }
   const About = { template: '<div>About</div>' }

2. 定义一些路由
   每个路由都需要映射到一个组件。

   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About },
   ]

3. 创建路由实例并传递 routes 配置
   VueRouter提供了createRouter方法用来创建路由实例

   const router = VueRouter.createRouter({
     //内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
     history: VueRouter.createWebHashHistory(),
     routes, // `routes: routes` 的缩写
   })

4. 创建并挂载根实例

   const app = Vue.createApp({})
   //确保 _use_ 路由实例使
   //整个应用支持路由。
   app.use(router)
   app.mount('#app')

5. 使用router
   通过调用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且 this.$route 的形式访问当前路由：

   // Home.vue
   export default {
     computed: {
       username() {
         // 我们很快就会看到 `params` 是什么
         return this.$route.params.username
       },
     },
     methods: {
       goToDashboard() {
         if (isAuthenticated) {
           this.$router.push('/dashboard')
         } else {
           this.$router.push('/login')
         }
       },
     },
   }

   要在 setup 函数中访问路由，请调用 useRouter 或 useRoute 函数。
   我们会经常使用 router 实例，请记住，this.$router 与直接使用通过 createRouter 创建的 router 实例完全相同。我们使用 this.$router 的原因是，我们不想在每个需要操作路由的组件中都导入路由。