千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

P78 078-路由基本使用

Vue Router是vue的官方路由 在使用vue.js构建单页面应用更加方便.

功能包括:

1.嵌套路由映射

2.动态路由选择

3.模块化,基于组见的路由配置

4.路由参数 查询 通配符

5.展示由vue.js的过度系统提供的过度效果

6.细致的导航控制

7.自动激活css类的链接

8.HTML5 history模式或者hash模式

9.可定制的滚动行为

10.URL的正确编码

(安装和引入：在项目中使用 Vue Router 需要先安装它，并将其引入到 Vue 实例中。可以使用 npm 或 yarn 进行安装，并使用 import 导入需要的模块。

命令:npm install vue-router)

使用:

一.配置路由

使用 Vue Router 需要配置路由规则。通过定义一个包含路径（path）和对应组件（component）的路由表来实现。可以配置嵌套路由、动态路由和命名视图等

import {createRouter,createWebHashHistory} form 'vue-router'

const router=[{

path:"路径",

component:"组件路径"

}]

const router = createRouter({

history:createWebHashHistory(),//hash模式#

routes, // routes: routes 的缩写

})

export default router

二.导入到main.js文件中

import router from '路径'

在挂载前注册路由插件

app.use(router)

三.路由出口

在根组件中(App.vue)写入一个路由出口(插槽)

<router-view></router-view>