【Vue3】Vue Router4路由的配置

安装Vue-Router

1、使用npm安装vue-router

我使用的是vue3，所以安装的是router@4，如果是用的vue2，就安装router@3

vue3使用这个

npm install vue-router@4

vue2使用这个

npm install vue-router@3

在main.js中引入router插件

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

// Vue Router
import VueRouter from 'vue-router'
app.use(VueRouter)

// 挂载
app.mount('#app')

配置路由

1、创建后续测试页面文件

在配置路由文件之前，我们先创建一个页面，方便等一下我们测试路由跳转

1.1、创建views文件夹

在src下创建一个views文件夹，这个文件夹下放路由跳转的文件

1.2、创建home.vue文件

home.vue文件的内容

<template>
    <h1>home</h1>
</template>

2、创建router文件夹

在src下创建router文件夹，这个文件夹放我们的路由配置文件

3、创建index.js文件

index.js文件是放路由的核心代码

// 该文件是专门用于创建整个应用的路由器
import { createRouter, createWebHistory } from "vue-router"
 
const routes = [
    {
        name: 'home',
        path: '/home',
        component: () => import('../views/home.vue')
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

// 创建router实例对象并暴露
export default router

4、main.js文件中使用router

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)

// Vue Router
// import VueRouter from 'vue-router'
// app.use(VueRouter)
// 把上面那个引入的VueRouter替换掉
import VueRouter from './router'
app.use(VueRouter)

// 挂载
app.mount('#app')

路由的使用

1、App.vue文件中添加测试代码【router-link标签】

router-link标签是跳转到某个路由，to属性指向的是路由的值
router-view标签可以理解为存放页面展示代码的地方，也就是我们点击了router-link标签后，跳转的对于路由页面的东西就在router-view处展示出来

<template>
  <div id="app">
    <router-link to="/home">跳转到home</router-link>
    <router-view />
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2、启动项目，测试

使用npm run serve启动项目，启动后，我们前往页面就能看到主页有我们刚刚写的代码

点击中间的跳转到home，就能实现跳转

并且上面的路径也随着改变

End