北京市保障性住建设投资中心网站首页,专业做网站联系电话,网站运营工作是干什么的,很有风格的网站有哪些1.创建项目及路由
1.1 创建文件时记得勾选上vue-router#xff0c;没有勾选也没有关系
// vue3安装命令
npm create vuelatest
// 以下选项可根据自己所需#xff0c;进行选择#xff0c;不懂就翻译
✔ Project name: … your-project-name
✔ Add TypeScript? …1.创建项目及路由
1.1 创建文件时记得勾选上vue-router没有勾选也没有关系
// vue3安装命令
npm create vuelatest
// 以下选项可根据自己所需进行选择不懂就翻译
✔ Project name: … your-project-name
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
// 这里选Yes自动配置路由
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / YesScaffolding project in ./your-project-name...
Done.
// 进入项目目录cd your-project-name
// 初始化配置npm i
// 项目运行命令npm run dev
1.2 如果以上选择的都是No的话可以自己手动安装vue-router
npm install vue-router
2.配置路由
2.1 安装完成过后配置路由
如果使用了1.1中的方法直接进入router文件夹配置路由即可
如果之前没有配置路由在src下创建router文件夹例如src/router/index.js
import { createRouter, createWebHistory } from vue-routerconst routes [// Home是父级{path: /,name: Home,component: () import(../views/home.vue),// about是子级children: [{path: about,name: about,component: () import(../views/about.vue),}]},{path: /login,name: Login,component: () import(../views/login.vue)}
]const router createRouter({history: createWebHistory(),routes
})export default router2.2 在main.js里面需要的配置
import { createApp } from vue
import ./style.css
import App from ./App.vue
import router from ./router/indexcreateApp(App).use(router).mount(#app)2.3 在App.vue文件中配置占位符
template// 路由视图router-view/router-view
/template3.路由跳转
路由跳转页面的方式
3.1 router-link跳转
templaterouter-link to./loginlogin/router-link
/template3.2.1 useRouter跳转
script setup
import { useRouter } from vue-router;
const router useRouter()
const goto () {router.push(/login)// 或者这样写也可以// router.push({ path: /login })
}
/script
templatebutton clickgoto跳转/button
/template3.2.2 或者根据name名称跳转
script setup
import { useRouter } from vue-router;
const router useRouter()
const goto () {router.push({name:Login})
}
/script
templatebutton clickgoto跳转/button
/template4.路由传参
传参方式分别是query和params
4.1 query传参
script setup
import { useRouter } from vue-router;
const router useRouter()
const goto () {router.push( {path: /login,query:{val:Hello World!}})
/script
templatebutton clickgoto跳转/button
/template在另一个vue文件中接收
templateh1query参数--{{route.query.val}}/h1
/template
script setup
import { useRoute } from vue-router;
const routeuseRoute()
console.log(route.query.val);
/script4.2 params传参
在路由中配置动态路由
import { createRouter, createWebHistory } from vue-routerconst routes [............{path: /login/:id,name: Login,component: () import(../views/login.vue)}
]const router createRouter({history: createWebHistory(),routes
})export default router传入params参数
script setup
import { useRouter } from vue-router;
const router useRouter()
const goto () {router.push( {path:/login,params:{id:1}})
/script
templatebutton clickgoto跳转/button
/template
接收params参数
templateh1params参数--{{route.params.id}}/h1
/template
script setup
import { useRoute } from vue-router;
const routeuseRoute()
console.log(route.params.id);
/script
