Vue学习--------router和router懒加载

Vue学习--------router和router懒加载

首先在router文件夹下面的index.js中导入vue-router

import { createRouter, createWebHistory } from 'vue-router'

之后创建router

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes

})

history为router模式
routes为路由名称
然后命名路由和导入组件

import Home from "@/views/Home";
import User from "@/views/User";

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
    },
    {
        path:'/user',
        name:'User',
        component: User
    }
]

component: () => import(/* webpackChunkName: “about” */ ‘…/views/About.vue’)为router懒加载，懒加载会让系统运行的更快，如果组件过多，不用懒加载的在打包项目时会只生成2两个js文件，如果进入网站会全部加载，要是使用懒加载就会有几个组件就创建n+1个js文件，这样的话，只有哪个组件被使用时才会加载。

之后暴露路由

export default router

暴露路由之后再main.js中把路由挂载到app上去

createApp(App).use(router).mount('#app')

然后就可以在app中使用路由了

<router-link to="/">首页</router-link>|
    <router-link to="/about">关于我们</router-link>|
    <router-link to="/user">个人中心</router-link>

如果要显示组件里的内容的话需用到以下代码.

<router-view/>