自学Vue路由

入门

用 Vue + Vue Router 创建单页应用非常简单：当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。

• router-link
  我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。
  router-link将呈现一个带有正确 href 属性的 a标签,这使得 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

<div id="app">
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </p>
  <!-- 路由出口 -->
  <router-view></router-view>
</div>

页面自动生成带href的a标签

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

• JavaScript

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({
  // 为了简单起见，我们在这里使用 hash 模式。
  history: VueRouter.createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})

4. 创建并挂载根实例

const app = Vue.createApp({})
app.use(router)

app.mount('#app')

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

export default {
  computed: {
    username() {
      return this.$route.params.username
    },
  },
  methods: {
    goToDashboard() {
      if (isAuthenticated) {
        this.$router.push('/dashboard')
      } else {
        this.$router.push('/login')
      }
    },
  },
}

带参数的动态路由匹配

有时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数 ：

const User = {
  template: '<div>User</div>',
}
const routes = [
  // 动态字段以冒号开始 
  { path: '/users/:id', component: User },
]

现在像 /users/abc 和 /users/123 这样的 URL 都会映射到同一个路由。
路径参数 用冒号 : 表示它的 params 的值将在每个组件中以 this.$route.params 的形式显示。

const User = {
  template: '<div>User {{ $route.params.id }}</div>',
}

可以在同一个路由中设置有多个 路径参数，
如：匹配模式：/users/:username/posts/:postId
匹配路径：/users/eduardo/posts/123
显示：{ username: ‘eduardo’, postId: ‘123’ }

响应路由参数的变化

使用带有参数的路由时需要注意的是，当用户从 /users/abc导航到 /users/123 时，相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。
要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.params ：

const User = {
  template: '...',
  created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        // 对路由变化做出响应...
      }
    )
  },
}

或者，使用 beforeRouteUpdate 导航守卫，它也可以取消导航：

const User = {
  template: '...',
  async beforeRouteUpdate(to, from) {
    // 对路由变化做出响应...
    this.userData = await fetchUser(to.params.id)
  },
}

(具体参考Vue官方文档)