前端实习D8

路由

安装 Vue Router:

npm install vue-router

设置 Vue Router：main.js

import { createApp } from 'vue';  
import App from './App.vue';  
import router from './router';  // 确保这里的路径是正确的  
 
createApp(App).use(router).mount('#app');

 检查 router 配置：router/index.js 文件

 import { createRouter, createWebHistory } from 'vue-router';  
import Home from '../views/Home.vue';  
 
const routes = [  
  {  
    path: '/',  
    name: 'Home',  
    component: Home  
  },  
  // 其他路由...  
];  
 
const router = createRouter({  
  history: createWebHistory(process.env.BASE_URL),  
  routes  
});  
 
export default router;

• router里的index.js报错process未定义：

使用 vite 安装 vue3 时，如果使用了 process.env，会遇到 process 未定义的情况，原因是 process.env 已经被移除了。解决办法是在 vite.config.ts 中增加 define：

import { defineConfig } from 'vite'
// ...
export default defineConfig({
  // ...
  define: {
    'process.env': {}
  }
})

链接跳转：

<a href="#/gowuche">购物车</a>

<router-link to="/gowuche">购物车</router-link> 高亮效果

可直接在css中 a.看它自动给我们配的类名 设置高亮具体效果 不用写js

组件在页面放置的位置：

<router-view/>

src/views文件夹：页面组件 整个页面

src/componennts文件夹 ：复用组件 页面里面的小组件

‘@/xx/xx’ @ 指src文件夹 绝对路径

跳转携带参数 ：

<router-link to=’’/search?aa=bb&参数名2=值’’>

拿到并使用   : $router.query.参数名

在creator()中获取路由参数this.$router.query.参数名

动态路由参数

path:’ /serach/**:**words自己取名’ //必须传参数 ，若希望不传也能匹配，可以加？

to=’’/search/wwh’’

获取：$router.parms.words

路由重定向

{path:匹配路径，redirect:重定向到的路径}

匹配到A路径时强制匹配到B路径

按钮跳转

path路径跳转

在方法里面写 this.$router.push(' 路由路径’)

name命名路由

{ name: ‘ 路由名 ‘，path:’ /path/xxx‘,component:xxx }

 

自动化生成代码工具：GitHub Copilot 

然后学了点vue3有点混乱，啥API,pinia,vuex