路由的基本使用

        1.安装

npm i vue-router@3

             2.引入

import VueRouter from 'vue-router'

        3.使用

Vue.use(VueRouter)

        4.在src目录下创建router

        5.创建两个组件

                5.1创建About组件

<template>
   <div> 
     <h1>我是About的内容</h1>
  </div>
</template>

<script>
export default {
  name: "About",
}
</script>

<style>
</style>

                5.2创建Message组件

<template>
  <div> 
     <h1>我是Message的内容</h1>
  </div>
</template>

<script>
export default {
  name: "Message",
}
</script>

<style>
</style>

        6.编写router

import About from '../pages/About'  
import Message from '../pages/Message' 

import VueRouter from 'vue-router'


//创建并暴露一个路由器
const VR =  new VueRouter({
    // mode:'history',
    node:"hash",
    routes:[
        {
            name:"guanyu",
            path:'/about',
            component:About,
            meta:{tittle:"生于小满"}
        },
        {
            name:"xinxi",
            path:'/msg',
            component:Message,
            meta:{tittle:"小满为安"},
        }
    ]
})


 

export default VR

        7.在main.js中引入router

import router from './router'

router,

        8.在App中使用router

<template>
   <div class="d"> 
    <div>
        <router-link to="/about">跳转about</router-link>
       <router-link to="/msg">跳转message</router-link>
    </div>

    <!-- 展示区 -->
   <router-view></router-view>
   </div>
</template>

<script>


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


 <style scoped>
    .d{
       display: flex;
       justify-content: space-around;
    }
 </style>

        9.运行项目,发现跳转的时候仅仅是单页面跳转