文章目录
vuerouter_4x__3">2.3 vue-router 4.x 的基本使用步骤
① 在项目中安装 vue-router
② 定义路由组件
③ 声明路由链接和占位符
④ 创建路由模块
⑤ 导入并挂载路由模块
vuerouter_10">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 中导入并挂载路由模块
vuerouter__114">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')