入门

用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子：

App.vue

<template>
   <div id="hzh">
    <h1>你好！黄子涵！</h1>
    <p>
      <!-- 使用 router-link 组件进行导航 -->
      <!-- 通过传递 `to` 来指定链接 -->
      <!-- `<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签 -->
        <router-link to="/home">去首页</router-link>
        <router-link to="/about">去关于</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: "App",
  methods: {
    
  },
  components: {
  },
};
</script>
 
<style>
 
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
export default new Router({
  routes: [
      {
        path: '/home',
        name: 'Home',
        component: () => import('../components/Home.vue'),
      },
      {
        path: '/about',
        name: 'About',
        component: () => import('../components/About.vue'),
      },
  ]
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: router,
  components: { App },
  template: '<App/>',
  render:h => h(App),
})

router-link

请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。我们将在后面看到如何从这些功能中获益。

router-view

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

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

要在 setup 函数中访问路由，请调用 useRouter 或 useRoute 函数。我们将在 Composition API 中了解更多信息。

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