开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情

入门

要想流畅的使用Vue3的单页面应用的能力，Vue Router的支持是必不可少的，二者可谓是缺一不可。当然，使用 vue router 也是非常简单的，我们只需要将我们的组件路径与路由列表建立一个映射关系，让vue router能够准确的渲染他们。下面我们通过一个简单的例子来演示一下：

对了，有一点我们还要强调一点：

router-view ：显示与 url 对应的组件。可以根据自己的业务场景，放在你想要放的任何位置。
router-link：和常规的 a 标签一样，可以自由的创建链接，使用router-link的好处在于，可以在不重新加载页面的情况下更改URL，处理URL的生成及编码。

// HTML
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 给router-link 组件传递的to的参数，进行导航链接跳转 -->
    <!--`<router-link>` 将渲染为一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 会将路由表对应的组件渲染在这个位置 -->
  <router-view></router-view>
</div>

// 1. 路由组件。
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

// 2. 定义组件的路由表，建立路由与组件之间的映射关系，可单独写成一个配置文件.
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
const router = VueRouter.createRouter({
  // 4. 这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes,
})

// 5. 创建并挂载根实例
const app = Vue.createApp({})
app.use(router)

app.mount('#app')

这样，我们就将 vue 和 vue router结合起来，然后就可以运行我们的html文件看看效果了。

我们可以通过this.$router的形式，在任意组件中访问router实例，如：this.$router.push('/dashboard')跳转路由。

通过this. $route访问当前路由，如： `this.$ route.params.username`获取当前路由上的参数。

Vue Router入门指北（一）

入门