创建路由模块
在项目中创建router.js 路由模块,在其中按照如下4个步骤创建并得到路由的实例对象:
1. 从vue-router中按需导入两个方法
2. 导入需要使用路由控制的组件
3. 创建路由实例对象
4. 向外共享路由实例对象
5. 在mian.js中导入并挂载路由模块
// 1. 从vue-router 中按需导入两个方法
// 2. createRouter 方法用于创建路由的实例对象
// 3. createHashHistory 用于指定路由的工作模式(hash 模式)
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../components/Home.vue'
import User from '../components/User.vue'
import Video from '../components/Video.vue'
export default createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/user', component: User },
{ path: '/video', component: Video }
]
})
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './route/index'
createApp(App).use(router).mount('#app')
history可以指定路由的工作模式
routes可以指定路由的匹配规则
export default createRouter({
// 指定路由的工作模式
history: createWebHashHistory(),
// 路由规则
routes: [
{ path: '/', component: Home },
{ path: '/user', component: User },
{ path: '/video', component: Video }
]
})
动态路由
动态路由指的是:把Hash地址中可变的部分定义为参数项,从而提高路规则的复用性,在vue-router中使用英文的冒号( : )来定义路由的参数项。示例代码如下:
// 路由中的动态参数以: 进行声明,冒号后面的是动态参数的名称
{ path: '/article/:id', component: Article }