路由和组件运行项目后自动打开浏览器 package.json文件中在命令后添加 --open 配置文件夹别名在根目录

运行项目后自动打开浏览器

package.json文件中在命令后添加 --open

配置文件夹别名

在根目录下创建 jsconfig.json 文件

内容

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "exclude": ["node_modules", "dist"]
}

vite项目需到vite.config.js中配置

resolve: {
      alias: {
        "@": path.resolve(__dirname, "src")
      }
    },

非路由组件

在components文件夹新建Header Footer

使用组件的步骤

创建定义
引入
注册
使用

安装 less-loader

npm install less less-loader@5

vite 项目下引入组件要写全路径到 .vue 否则找不到

路由组件

新建pages文件夹 (或views)

放置路由组件

新建router文件夹

index.js 文件中配置路由对象

// 引入路由插件
import {createRouter, createWebHistory} from 'vue-router' 


// 引入路由组件
import Home from '@/pages/Home/index.vue'
import Search from '@/pages/Search/index.vue'
import Login from '@/pages/Login/index.vue'
import Register from '@/pages/Register/index.vue'

// 配置router实例并暴露
export default createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/home",
            component: Home
        },
        {
            path: "/search",
            component: Search
        },
        {
            path: "/login",
            component: Login
        },
        {
            path: "/register",
            component: Register
        }
    ]
})

到 main.js 文件中引入

// 引入路由
import router from '@/router/index.js'

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

在 main.js 中注册路由后，组件会增加 $route 和$ router 属性

$route 获取路由信息路径 query params
$router 编程式导航进行路由跳转

在根组件设置路由组件出口< router-view >

两种路由跳转方式

声明式导航 router-link

编程式导航 push | replace

除了路由跳转还可以进行其他业务逻辑

路由元信息

定义路由时可以定义 meta 字段 meta 是一个对象，内容自定义

路由参数的形式

params参数

路径的一部分，配置路由时需要占位类似Django动态路由

query参数

不属于路径，但是跟在路径后 ?k=v 不需要占位

跳转路由时携带参数的三种方式

// 字符串方式 // this. $router.push("/search/"+this.keyword+'?k='+this.keyword.toUpperCase()) // 模板字符串方式 // this.$ router.push(/search/${this.keyword}?k=${this.keyword.toUpperCase()}) // 对象方式, 如果要传递params参数，需要对路由命名,使用name, 不能用path this.$router.push({ name: 'search', params: {keyword: this.keyword}, query: {k: this.keyword} })

如果需要传params参数，但是不传，会导致url异常

指定params参数可传可不传：配置路由路径时在占位参数后加 ? 在params参数可以不传的情况下传递空串，同样会导致url异常 vue3不会
和undefined取或

全局组件只需要注册一次就可以在任意地方使用

使用app注册全局组件

import TypeNav from '@/pages/Home/TypeNav/index.vue'

app.component(TypeNav.name, TypeNav)

路由和组件