vue集成路由插件vueRouter

vueRouter

vue.js的官方路由插件，与vue深度结合，适合构建单页面应用
在vueRouter的单页面应用中，是路径的切换，也就是组件的切换

如何使用

1 安装
    npm install vue-router@4--save
2 在src文件夹目录下创建router文件夹，同时在router文件夹下创建index.js文件
    src
        router
            index.js
3 在index.js里引入并解构vue-router
    import {createRouter, createWebHashHistory} from 'vue-router'
    createRouter 创建路由对象
    createWebHashHistory 创建路由hash模式
4 定义路由表
    const routes = [
{
    path:'/list',
    name:'list',
    component:BookList
},

{
    path:'/about',
    name:'about',
    component:About
},

   ]
5 引入组件
    import BookList from '@/components/BookList.vue'
    import About from '@/components/About.vue'
6 创建路由对象
    const router = createRouter({
    history:createWebHashHistory(),
    routes
    })
7 暴露路由对象
    export default router

集成插件

main.js
    import { createApp } from 'vue'
    import App from '@/App.vue'
    import router from '@/router/index.js'
    // import './assets/main.css'  引入全局样式
    // const app = createApp(App)
    // app.use(router) // 集成插件
    // app.mount('#app')
    createApp(App).use(router).mount('#app')

路由出口

       路由匹配到的组件将渲染在这里
        <router-view></router-view>