Vue Router的基本用法

一、安装使用步骤

对于一个现有的使用 JavaScript 包管理器的项目，你可以从 npm registry 中安装 Vue Router：

npm install vue-router@4

新建文件src/router/index.js

import { createWebHistory, createRouter } from 'vue-router'

//配置路由映射：组件和路径映射关系的routes数组
const routes = [
  { 
      path: '/home',
      component: ()=>import('./HomeView.vue')
  }, 
  { 
      path: '/about',
      component: ()=>import('./AboutView.vue')
  }
]

//通过createRouter创建路由对象，并且传入routes和history模式
const router = createRouter({
  history: createWebHistory(),
  routes,
})

//向外共享路由实例对象
export default router

在 src/main.js 中导入注册 Vue Router

import router from ‘./router’
app.use(router)

在App.vue中使用

<!-- App根组件 -->

<template>
    <!-- 声明路由链接 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!-- 声明路由占位符 -->
    <router-view></router-view>
</template>

二、动态路由匹配

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。

例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。
在Vue Router中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数；

const routes = [
  { 
  	  // 动态字段以冒号开始	
      path: '/users/:id',
      component: ()=>import('./User.vue')
  }
]

你可以在同一个路由中设置有多个 路径参数，它们会映射到 $route.params 上的相应字段。例如：

匹配模式	匹配路径	route.params
/users/:username	/users/eduardo	`{ username: 'eduardo' }`
/users/:username/posts/:postId	/users/eduardo/posts/123	`{ username: 'eduardo', postId: '123' }`

获取动态路由的值：

<template>
  <div>
    <h3>User---{{ $route.params.id }}</h3>
  </div>
</template>

<script setup>
    // setup中使用useRoute
	import {useRoute} from "vue-router"
    const router = useRoute()
    console.log(route.params.id)
</script>

三、路由命名

当创建一个路由时，我们可以选择给路由一个 name：

const routes = [
  {
    path: '/user/:username',
    name: 'profile', 
    component: User
  }
]

然后我们可以使用 name 而不是 path 来传递 to 属性给 <router-link>：

<router-link :to="{ name: 'profile', params: { username: 'erina' } }">
  User profile
</router-link>

上述示例将创建一个指向 /user/erina 的链接。

四、编程式导航

<script setup>
    // setup中使用useRoute
	import {useRoute} from "vue-router"
    const router = useRoute()
   	
    //字符串路径
    router.push('/user/eduardo')
    
    //带路径的对象
    router.push({path:'/users/eduardo'})
    
    //命名的路由，并加上参数，让路由建立url
    router.push({name:'user',params:{username:'eduardo'}})
    
    //带查询参数，结果是 /register?plan=private
    router.push({path:'/register',query:{plan:'private'}})
</script>

注意：如果提供了 path，params 会被忽略

const username = 'eduardo'

// 我们可以手动建立 url，但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

替换当前位置

它的作用类似于 router.push，唯一不同的是，它在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。也可以直接在传递给 router.push 的 to 参数中增加一个属性 replace: true ：

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

横跨历史

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)

五、路由组件传参

<!-- User.vue -->
<script setup>
    
defineProps({
  id: String
})
    
</script>

<template>
  <div>
    User {{ id }}
  </div>
</template>

然后我们可以通过设置 props: true 来配置路由将 id 参数作为 prop 传递给组件：

const routes = [
  { path: '/user/:id', component: User, props: true }
]