VUE之Router使用及工作模式

1、路由的使用

【两个注意点】

1）路由组件通常放在pages 或 views文件夹，一般组件通常放在components文件夹。

2）通过点击导航，视觉效果上"消失"了的路由组件，默认是被"卸载"掉的，需要的时候再去挂载。

// 创建一个路由器，并暴露出去

// 第一步：引入createRouter
import {createRouter,createWebHistory} from 'vue-router'
// 引入一个个可能呈现组件
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

// 第二步：创建路由器
const router = createRouter({
    history:createWebHistory(), //路由器的工作模式
    routes:[  //一个个路由规则
        {
            path:'/home',
            component: Home
        },
        {
            path:'/news',
            component: News
        },
        {
            path:'/about',
            component: About
        },
    ]
})

export default router

i