路由
安装 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