vue-router之简单使用

专栏目录请点击

安装

npm install vue-router@4

或者

yarn add vue-router@4

项目中的使用

1. 我们在src下新建router的目录，并在下面新建index.js的文件，专门用于管理路由
2. 并在src下新建views来专门存放路由组件,这里我们新建了两个路路由文件Home.vue和About.vue

目录如下

└─src
    ├─router
    	└─index.js
    ├─views
    	├─Home.vue
    	└─About.vue
    ├─App.vue
    └─main.js

展示位置

• 使用router-view标签进行路由的展示
• 使用router-link进行路由的跳转

App.vue

<template>
  <h1>Hello App!</h1>
  <!-- 路由导航，相当于a标签  -->
  <ul>
    <li><router-link to="/">Home</router-link></li>
    <li><router-link to="/about">About</router-link></li>
  </ul>
  <!-- 展示路由，路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</template>

路由注册

router/index.js

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

import Home from "../views/Home.vue"
import About from "../views/About.vue"

const routes = [
    { path: "/", component: Home },
    { path: '/about', component: About }
]

export default createRouter({
    // 使用hash模式
    history: createWebHashHistory(),
    routes
})

路由文件

Home.vue

<script setup>
const hello = "hello home"
</script>

<template>
    <h2>{{hello}}</h2>
</template>

About.vue

<script setup>
const hello = "hello aboult"
</script>

<template>
    <h2>{{hello}}</h2>
</template>

路由挂载

main.js

import { createApp } from 'vue'

import App from "./App.vue"
import router from './router'

const app = createApp(App)
app.use(router) // vue-router挂载到全局

app.mount('#app')

也可以链式调用进行挂载

const app = createApp(App).use(router)

效果

当我们点击不同的路由导航的时候，在路由的显示位置，就会展示不同的页面