RouterLink 和 RouterView

RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。我们将会在之后的部分深入了解 RouterLink 组件。

RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西

<template>
  <h1>Hello App!</h1>
  <p>
    <strong>Current route path:</strong> {{ $route.fullPath }}
  </p>
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
  </nav>
  <main>
    <RouterView />
  </main>
</template>

route和router的区别

route （路由对象）
route 则代表当前激活的路由状态信息对象
它是一个包含了当前URL解析得到的信息的对象。例如：
1.  `$route.path`：对应当前路由的路径，总是解析为绝对路径，如 `"/foo/bar"`
2.  `$route.params`：一个包含动态片段和星号片段的键值对的对象。
3.  `$route.query`：一个包含查询参数的对象
route对象还包含了一些如路由名称、路由参数等元信息。  
在组件内部，可以通过 `this.$route` 来访问当前路由对象，以便获取当前路由的状态信息或监听路由变化。
console.log(this.$route); // 输出当前路由对象

router （路由实例）
router 是 Vue Router 的实例，它是整个路由系统的核心。
它提供了多种方法，如**push、replace、go** 等，用于在应用程序中导航到不同的路由。
router 还包含了一些全局的路由钩子函数，如 ***beforeEach、beforeResolve 和 afterEach***，这些钩子函数可以在路由改变之前或之后执行特定的逻辑，例如权限检查、数据预取等

创建路由器实例

路由器实例是通过调用 createRouter() 函数创建的:

import { createWebHashHistory,createMemoryHistory, createRouter } from 'vue-router' //导入路由系列

import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'

const routes = [
{ path: '/', redirect: '/home' }, // 重定向
  { 
     path: '/', /路由分配的 URL
     name: "home", //当路由指向此页面时显示的名字
     component: HomeView  //路由调用这个页面时加载的组件名
  },
  { 
     path: '/about',
     name: "about",
     component: AboutView 
  },
]

//创建路由
const router = createRouter({
   // history: createWebHashHistory(), //hash模式
  history: createWebHistory(), //History模式
  routes,  //路由路径
    scrollBehavior(to, from, savedPosition) {
    //滚动行为
    if (savedPosition) {
      return savedPosition;
    } else {
      if (to.meta.savedPosition) {
        // 如果meta信息中存在savedPosition，页面就滚动到上次浏览的位置（savedPosition）
        return { x: 0, y: to.meta.savedPosition };
      }
      return { x: 0, y: 0 };
    }
  },
  // 创建Vue实例并挂载到页面上
     new Vue({ 
         router, // 注入router实例到Vue根实例中
         }).$mount('#app');
})

编程式导航

注意: 下面的示例中的 router 指代路由器实例。在组件内部，你可以使用 $router 属性访问路由，例如 this.$router.push(...)。如果使用组合式 API，你可以通过调用 useRouter() 来访问路由器。

//router.push 这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL
// 命名的路由，并加上参数，让路由建立 url 
router.push({ name: 'user', params: { username: 'eduardo' } }) 
// 带查询参数，结果是 /register?plan=private 
router.push({ path: '/register', query: { plan: 'private' } })

//router.replace 它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。
router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

//router.go() 该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 `window.history.go(n)`。
// 刷新页面
router.go(0)
// 向前移动一条记录，与 router.forward() 相同
router.go(1)
// 返回一条记录，与 router.back() 相同
router.go(-1)
// 前进 3 条记录
router.go(3)
// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

Vue Router 和 组合式 API

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

function pushWithQuery(query) {
  router.push({
    name: 'search',
    query: {
      ...route.query,
      ...query,
    },
  })
}
</script>