路由配置入门 view-router(超级适合小白）

---

概念

vue属于单页面应用，所谓路由就是根据浏览路径的不同，更换视图组件

好用的模板插件

Vue VSCode Snippets
用于快速书写三段式，template,script,style
提示词为v3s

路由配置好的信号

引入方法

在这里面导入
// 导入router所需的方法

//createWebHashHistory在地址上表现为#
import component from "element-plus/es/components/tree-select/src/tree-select-option.mjs"
import {createRouter,createWebHashHistory} from "vue-router"
//制定路由规则
const routes = [
    {
        Path:'/',
        name:'main',
        component:()=>import('@/views/Main.vue')
    }
]
const router = createRouter({
    //设置路由模式
    history:createWebHashHistory(),
    routes,
});
export default router

const特性

1. 不可重新赋值:
   一旦声明了一个 const 变量，就不能再次给它赋值。例如，如果你声明了 const x = 10;，那么尝试执行 x = 20; 将会导致错误。
2. 块作用域:
   const 声明的变量具有块作用域，这意味着它们只在声明它们的代码块内可见。这与 var 关键字不同，后者具有函数作用域。
3. 必须初始化:
   当使用 const 声明变量时，必须立即初始化它，否则会引发语法错误。
4. 对象和数组的特殊处理:
   即使是 const 声明的变量指向的对象或数组不能被重新赋值，但仍然可以修改对象的属性或数组的内容。

箭头函数

1. 组件定义:
   component: () => import(‘@/views/Main.vue’) 指定一个组件，该组件将在用户访问 /main 路径时被加载和渲染。
   当Vue Router需要渲染这个组件时，它会调用箭头函数并触发动态导入。
2. 动态导入:
   import(‘@/views/Main.vue’) 将会加载 @/views/Main.vue 文件，其中 @ 是一个别名，通常在Vue CLI项目中指向 src 目录。
   动态导入返回一个Promise，该Promise最终解析为 Main.vue 组件的默认导出。
3. 懒加载:
   使用这种方法，Vue Router只会在用户导航到 /main 路径时才加载和编译 Main.vue 组件。
   这意味着如果用户从未访问过 /main 路径，那么 Main.vue 组件就不会被加载到浏览器中，从而减小了初始加载时间和提高了性能。

main.js中使用router

import { createApp } from 'vue';
import router from './router';//可以省略index.js
import App from './App.vue';
import "@/assets/less/index.less";
const app=createApp(App);
app.use(router).mount('#app');

路由组成

<router-link>:路由链接组件，浏览器会解析为<a>
<router-view>:路由视图组件