2.3 vue-router 4.x 的基本使用步骤
① 在项目中安装 vue-router
② 定义路由组件
③ 声明路由链接和占位符
④ 创建路由模块
⑤ 导入并挂载路由模块
2.3.1 在项目中安装 vue-router
在 vue3 的项目中，只能安装并使用 vue-router 4.x。安装的命令如下：
npm i vue-router@next -S
2.3.2 定义路由组件
在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue 三个组件，将来要使用 vue-router 来控制它们的展示与切换：
MyHome.vue
<template> <div> <h3>MyHome 组件</h3> </div> </template> <script> export default { name: 'MyHome', } </script> <style lang="less" scoped></style>
MyMovie.vue
<template> <div> <h3>MyMovie 组件</h3> </div> </template> <script> export default { name: 'MyMovie', } </script> <style lang="less" scoped></style>
MyAbout.vue
<template> <div> <h3>MyAbout 组件</h3> </div> </template> <script> export default { name: 'MyAbout', } </script> <style lang="less" scoped></style
2.3.3 声明路由链接和占位符
可以使用 <router-link>标签来声明路由链接，并使用 <router-view>标签来声明路由占位符。
App.vue
<template> <div> <h1>vue-router 的基本使用</h1> <!-- 声明路由链接 --> <router-link to="/home">首页</router-link> <router-link to="/movie">电影</router-link> <router-link to="/about">关于</router-link> <hr /> <!-- 路由的占位符 --> <router-view></router-view> </div> </template> <script> export default { name: 'MyApp', } </script> <style></style>
2.3.4 创建路由模块
在项目中创建 router.js 路由模块，在其中按照如下 5 个步骤创建并得到路由的实例对象：
① 从 vue-router 中按需导入两个方法
② 导入需要使用路由控制的组件
③ 创建路由实例对象
④ 向外共享路由实例对象
⑤ 在 main.js 中导入并挂载路由模块
2.3.4.1 从 vue-router 中按需导入两个方法
// 从 vue-router 中按需导入两个方法 // createRouter 方法用于创建路由的实例对象 // createwebHashHistory 用于指定路由的工作模式hash模式> import { createRouter, createWebHashHistory } from 'vue-router'
2.3.4.2 导入需要使用路由控制的组件
import Home from './MyHome.vue' import Movie from './MyMovie.vue' import About from './MyAbout.vue'
2.3.4.3 创建路由实例对象
// 创建路由对象 const router = createRouter({ // 指定路由的工作模式 history: createWebHashHistory(), // 声明路由的匹配规则 routes: [ { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/movie', component: Movie }, { path: '/about', component: About }, ], })
2.3.4.4 向外共享路由实例对象
// 导出路由对象 export default router
2.3.4.5 完整代码
// 从 vue-router 中按需导入两个方法 import { createRouter, createWebHashHistory } from 'vue-router' import Home from './MyHome.vue' import Movie from './MyMovie.vue' import About from './MyAbout.vue' // 创建路由对象 const router = createRouter({ // 指定路由的工作模式 history: createWebHashHistory(), // 声明路由的匹配规则 routes: [ { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/movie', component: Movie }, { path: '/about', component: About }, ], }) // 导出路由对象 export default router
2.3.4.6 在 main.js 中导入并挂载路由模块
import { createApp } from 'vue' // 导入App组件 import App from './components/02.start/App.vue' //导入路由模块 import router from './components/02.start/router'
const app = createApp(App) // 挂载路由模块 app.use(router) app.mount('#app')
完整代码：
//导入创建Vue实例对象的方法 import { createApp } from 'vue' // 导入App组件 import App from './components/02.start/App.vue' //导入路由模块 import router from './components/02.start/router' import './assets/css/bootstrap.css' import './index.css' const app = createApp(App) // 挂载路由模块 app.use(router) app.mount('#app')
