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')
3 vue-router 的高级用法
3.1 路由重定向
路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。
通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向。
路由重定向Vue2与Vue3相同。
// 重定向的路由规则 { path: '/', redirect: '/home' },
当访问的地址为 ‘/’ 时，会跳转到 ‘/home’ 。
// 创建路由的实例对象 const router = new VueRouter({ // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系 routes: [ // 重定向的路由规则 { path: '/', redirect: '/home' }, // 路由规则 { path: '/home', component: Home }, { path: '/movie', component: Movie }, { path: '/about', component: About } ] })
3.2 嵌套路由
通过路由实现组件的嵌套展示，叫做嵌套路由。
嵌套路由的实现Vue2与Vue3相同。
3.2.1 嵌套路由的实现步骤
① 声明子路由链接和子路由占位符
② 在父路由规则中，通过 children 属性嵌套声明子路由规则
3.2.2 声明子路由链接和子路由占位符
在 About.vue 组件中，声明 tab1 和 tab2 的子路由链接以及子路由占位符。
<template> <div class="about-container"> <h3>About 组件</h3> <!-- 子级路由链接 --> <router-link to="/about">tab1</router-link> <router-link to="/about/tab2">tab2</router-link> <hr /> <!-- 子级路由占位符 --> <router-view></router-view> </div> </template> <script> export default { name: 'About' } </script> <style lang="less" scoped> .about-container { min-height: 200px; background-color: skyblue; padding: 15px; > a { margin-right: 10px; } } </style>
3.2.3 通过 children 属性声明子路由规则
// 创建路由的实例对象 const router = new VueRouter({ // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系 routes: [ // 重定向的路由规则 { path: '/', redirect: '/home' }, // 路由规则 { path: '/home', component: Home }, { path: '/movie', component: Movie}, { path: '/about', component: About, //当访问 '/about'时默认访问 '/about/tab1' redirect: '/about/tab1', children: [ // 子路由规则 //访问 '/about/tab1' 展示 Tab1 组件 { path: 'tab1', component: Tab1 }, //访问 '/about/tab2' 展示 Tab2 组件 { path: 'tab2', component: Tab2 } ] } ] })
3.2.4 默认子路由
默认子路由：
如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”。访问路由时，会默认访问默认子路由。
所以要设置默认访问的组件，可以使用重定向也可以使用默认子路由。
默认子路由示例：
// 创建路由的实例对象 const router = new VueRouter({ // routes 是一个数组，作用：定义 “hash 地址” 与 “组件” 之间的对应关系 routes: [ // 重定向的路由规则 { path: '/', redirect: '/home' }, // 路由规则 { path: '/home', component: Home }, { path: '/movie', component: Movie }, { path: '/about', component: About, // 重定向 // redirect: '/about/tab1', children: [ // 子路由规则 // 访问 '/about' 时默认访问 '/about'下的 Tab1 { path: '', component: Tab1 }, { path: 'tab2', component: Tab2 } ] } ] })
