概念
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特性
- 不可重新赋值:
一旦声明了一个 const 变量,就不能再次给它赋值。例如,如果你声明了 const x = 10;,那么尝试执行 x = 20; 将会导致错误。 - 块作用域:
const 声明的变量具有块作用域,这意味着它们只在声明它们的代码块内可见。这与 var 关键字不同,后者具有函数作用域。 - 必须初始化:
当使用 const 声明变量时,必须立即初始化它,否则会引发语法错误。 - 对象和数组的特殊处理:
即使是 const 声明的变量指向的对象或数组不能被重新赋值,但仍然可以修改对象的属性或数组的内容。
箭头函数
- 组件定义:
component: () => import(‘@/views/Main.vue’) 指定一个组件,该组件将在用户访问 /main 路径时被加载和渲染。
当Vue Router需要渲染这个组件时,它会调用箭头函数并触发动态导入。 - 动态导入:
import(‘@/views/Main.vue’) 将会加载 @/views/Main.vue 文件,其中 @ 是一个别名,通常在Vue CLI项目中指向 src 目录。
动态导入返回一个Promise,该Promise最终解析为 Main.vue 组件的默认导出。 - 懒加载:
使用这种方法,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>:路由视图组件