vue-router入门篇一

假设已经安装vue-router

在src路径下新建router文件夹和views文件夹，

在router文件夹下新建home.vue和about.vue文件

在views文件夹下新建index.js文件

 

//home.vue 文件内容
<template>
<div>
    home
</div>
</template>

//about.vue文件内容
<template>
<div>
    about
</div>
</template>

//index.js文件内内容
import {createRouter,createWebHashHistory} from 'vue-router'

//1.定义路由组件，也可以从别的地方引入
import home from '../views/home.vue'
import about from '../views/about.vue'


// 2.定义路由
const routes =[
    {path:'/',component:home},
    {path:'/about',component:about}
]

//3.创建路由
const routers=createRouter({
    history:createWebHashHistory(),
    routes,
})

//4.导出出去

export default routers

//app.vue内容
<script setup>
</script>

<template>
  <div>
    <h1>hello all</h1>
  <p>
    <router-link to="/"> go to home </router-link>
    <router-link to="/about"> go to about</router-link>
  </p>
  <router-view></router-view>
  </div>

</template>

<style>

</style>

//main.js文件内容

import { createApp } from 'vue'
import App from './App.vue'
import routers from './router/index.js'

const app = createApp(App)

app.use(routers)
app.mount('#app')

最后，启动即可。