Vue路由：Vue Router

Vue Router 介绍

---

Vue Router 是 Vue.js (opens new window) 官方的路由管理器。

核心深度集成，包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制

Vue Router 安装

---

npm install vue-router

创建src/router/index.js文件及目录，之后前端的路由都将维护在此文件中

route-view一定会出现在App.vue里面，它其实是路由占位符，页面的入口是App.vue，它的入口一定是主视图。

当你进入到某个路径的时候，这个路径会有一个对应的页面，它会将页面文件渲染到路由占位符当中，其实也就是将整个页面渲染到路由占位符当中。这就是前面说的将子组件渲染到App.vue的另外一种方式，用路由的方式。

先去定义好路由，定义好路由然后在APP.vue里面添加路由占位符

定义，创建路由：

import {createRouter, createWebHistory} from "vue-router"

//导入组件的方式1，先导入，下面引用
import HelloWorld from '@/components/HelloWorld.vue'

//定义路由规则
const routes = [
    {
        path: "/helloworld", //路由的路径
        name: "HelloWorld", //路由名称，会显示到侧边栏
        component: HelloWorld //引入视图组件，其实就是引入vue文件

    },
    {
        path: "/test",
        name: "Test",
        //导入视图组件的方式二，当路由被访问的时候，才会加载组件
        component: () => import('@/components/Test.vue')

    }

]

//2.创建路由实例并传递上面路由对象routes
    const router = createRouter({
//路由的一种前端展现方式，通常使用这个就行了
        history: createWebHistory(),
        routes
  }
)

//暴露出去
export default router

去App.vue里面添加路由占位符

去main.js里面去导入路由

import { createApp } from 'vue'
import App from './App.vue'
import Test from '@/components/Test.vue'

import router from '@/router'

const app =createApp(App)
//使用vue路由
app.use(router)
app.component('Test',Test)
app.mount('#app')

 主页面是空白的，因为是没有定义这个路由，其次app.vue里面没有任何东西了。

上面其实就是路由和VUE文件去做了匹配。