Vue 3 中基于 vue-router 4 的路由配置与使用的简单示例

Vue 官方文档（中文）：https://v3.cn.vuejs.org/guide/introduction.html

Vue Router 官方文档（中文）：https://router.vuejs.org/zh/introduction.html

创建路由文件

导入 createRouter 函数和路由组件

// index.js

// 导入需要的函数、路由组件
import { createRouter, createWebHashHistory } from 'vue-router'
import Login from './components/Login.vue'

// 定义路由数组，每个路由映射到一个组件
const routes = [
	{ 
		path: '/login', 
		component: Login,
		name: 'login'
	}
]

// 配置路由，创建并暴露路由实例
export default createRouter({
	// 这里使用 hash 模式
	history: createWebHashHistory(),
	// routes: routes 的缩写
	routes
})

Vue Router 提供了懒加载支持 ，允许 webpack 在此进行代码分割

代码分割或懒加载部分应用，可以帮助缩减浏览器初始化渲染所需下载的资源的尺寸，并大幅优化大型应用的 TTI ( time-to-interactive，可交互时间 )。其关键是在初始化的时候 “按需加载” ，当路由被访问的时候才加载对应组件，这样就会更加高效。

Vue Router 支持开箱即用的动态导入，这意味着可以用动态导入代替静态导入，实现方式如下：

// 将这段代码：
import Login from './components/Login.vue'

const routes = [
	{ 
		path: '/login', 
		component: Login,
		name: 'login'
	}
]

// 替换为：
const routes = [
	{ 
		path: '/login', 
		component: () => import('./components/Login.vue'),
		name: 'login'
	}
]

更新客户端入口

导入路由文件，并在应用实例上使用

// main.js

// 导入函数、路由实例、根组件
import { createApp } from 'vue'
import router from './index.js'
import App from './App.vue'

// ...

// 创建应用实例
const app = createApp(App)

// 使用路由实例，使整个应用支持路由
app.use(router)
// 挂载
app.mount('#app')

// ...

注意： Vue.use 全局 API 在 Vue 3 中已无法使用，并且调用 Vue.use() 现在将触发一个警告。取而代之的是，必须在应用实例上显式指定使用此插件。

在 HTML 中使用（声明式导航）

<div id="app">
  <h1>Hello World!</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>

router-link 和 router-view

router-link 属于声明式导航，用来跳转链接，使 Vue Router 可以在不重新加载页面的情况下更改 URL，处理 URL 的生成以及编码。

router-view 用来渲染组件，它所在位置会显示匹配的 URL 所对应的组件。

在 JavaScript 中使用（编程式导航）

在 Vue 实例中，可以通过 this.$router 访问路由实例。

// 字符串路径
this.$router.push('/login')

// 带有路径的对象
this.$router.push({ path: '/login' })

// 命名的路由，并加上参数，结果是 /login/zhangsan
this.$router.push({ name: 'login', params: { username: 'zhangsan' } })

// 带查询参数，结果是 /register?plan=private
this.$router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
this.$router.push({ path: '/about', hash: '#team' })

注意：如果对象里提供了 path，那么 params 会被忽略，例如：

// `params` 不能与 `path` 一起使用，结果是 /login
this.$router.push({ path: '/login', params: { username: 'zhangsan'} })

router.push 和 router.replace

router.replace 与 router.push 的作用类似，都属于编程式导航。

二者唯一不同的是，router.replace 在导航时不会向 history 添加新记录，正如它的名字所暗示的那样——它取代了当前的条目。

小小结

router.push 和 所有其他导航方法 都会返回一个 Promise，等到导航完成后可以知道是成功还是失败。

Vue + Vue Router 做的就是将自定义组件映射到路由上，让 Vue Router 知道在哪里渲染它们。