网站托管就业,建筑工程公司取名免费,vi标识设计公司,公司起名网站1、路由router
pnpm i vue-router2、创建使用环境
1.src下创建 router文件夹、里面创建index.ts文件
//创建一个路由暴露出去//1.引入createRouter
import { createRouter, createWebHistory } from vue-router;// import Home from ../components/Home.vue//…1、路由router
pnpm i vue-router2、创建使用环境
1.src下创建 router文件夹、里面创建index.ts文件
//创建一个路由暴露出去//1.引入createRouter
import { createRouter, createWebHistory } from vue-router;// import Home from ../components/Home.vue// import Goods from ../components/Goods.vue
// import Mine from ../components/Mine.vue;//2.创建路由器
const router createRouter({history: createWebHistory(),routes: [{path: /home,component: ()import (../components/Home.vue),// component:Home},{path: /goods,component: ()import(../components/Goods.vue),// component:Goods},{path: /mine,component: ()import(../components/Mine.vue),// component:Mine},{path:/,redirect:/home,}],
});
export default router2.main.ts文件中配置
//引入路由器import router from ./routerconst appcreateApp(App)//使用路由器app.use(router)
3.页面中使用 RouterView, RouterLink
templatediv classboxdiv classnav-boxRouterLink to/home首页/RouterLinkRouterLink to/goods商品/RouterLinkRouterLink to/mine我的/RouterLink/divdiv classcontent-boxRouterView/RouterView/div/div
/templatescript setup langts
import { RouterView, RouterLink } from vue-router;
/scriptstyle langscss scoped
.box {.nav-box {background-color: red;// border: 1px solid #00ff00;display: flex; a {flex: 1;border: 1px solid #00ff00;text-align: center;}}
}
/styleto 的两种写法
RouterLink to/home首页/RouterLinkRouterLink to/goods商品/RouterLinkRouterLink to/mine我的/RouterLinkRouterLink:to{path: /mine,}我的/RouterLink命名路由
{path: /home,name:homePage,component: ()import (../pages/Home.vue),// component:Home},{path: /goods,name:goodsPage,component: ()import(../pages/Goods.vue),children:[{path:/detial,component:()import(../pages/GoodsDeatil.vue)}]// component:Goods},{path: /mine,name:mine,component: ()import(../pages/Mine.vue),// component:Mine},RouterLink:to{name: mine,}我的/RouterLink嵌套路由 {path: /goods,name:goodsPage,component: ()import(../pages/Goods.vue),children:[{path:detial,component:()import(../pages/GoodsDeatil.vue)}]// component:Goods},templatediv classboxdiv classleftulli v-for(item, index) in goods :keyindexRouterLink to/goods/detial {{ item }}/RouterLink/li/ul/divdiv classrightRouterView/RouterView/div/div
/templatequery 传参 !-- 第一种写法 --RouterLink :to/goods/detial?index${index}title${item}{{ item }}/RouterLink!-- 第二种写法 --RouterLink:to{path: /goods/detial,query: {index: index,title: item,},}{{ item }}/RouterLink!-- templatediv商品详情{{ router.query.index }}---{{ router.query.title }}/div
/template --
templatediv商品详情{{ query.index }}---{{ query.title }}/div
/templatescript setup langts
import { toRefs } from vue;
import { useRoute } from vue-router;
let router useRoute();// console.log(useRoute().query);let { query } toRefs(router);// let { index, title } toRefs(useRoute().query);
/scriptstyle langscss scoped/styleparams 传参 {path: /goods,name:goodsPage,component: ()import(../pages/Goods.vue),children:[{path:detial/:index/:title,component:()import(../pages/GoodsDeatil.vue)}]// component:Goods},router-link :to/goods/detial/${index}/${item}{{ item }}/router-linktemplatediv商品详情{{ params.index }}---{{ params.title }}/div
/templatescript setup langts
import { toRefs } from vue;
import { useRoute } from vue-router;
let router useRoute();console.log(router);let { params } toRefs(router);
//这种写法必须写name path报错
{path: /goods,name:goodsPage,component: ()import(../pages/Goods.vue),children:[{path:detial/:index/:title,name:xiangqing,component:()import(../pages/GoodsDeatil.vue)}]// component:Goods},!-- 第二种写法 --router-link:to{// path: /goods/detial, //path 会报错name: xiangqing,params: {index: index,title: item,},}{{ item }}/router-link路由组件propsparams 传参
{path: /goods,name:goodsPage,component: ()import(../pages/Goods.vue),children:[{path:detial/:index/:title?,name:xiangqing,props:true, //开启 只处理params参数component:()import(../pages/GoodsDeatil.vue)}]// component:Goods},templatediv商品详情{{ index }}---{{ title }}/div
/templatescript setup langts
import { toRefs } from vue;defineProps([index, title]);//接受属性
// import { useRoute } from vue-router;
// let router useRoute();// console.log(router);// let { params } toRefs(router);// let { index, title } toRefs(useRoute().query);
/scriptstyle langscss scoped/stylequery传参 这样设置
props(router){return router.query},
编程式导航
router-link 本质是a 标签script setup langts
import { onMounted } from vue;import { useRouter } from vue-router;let router useRouter();onMounted(() {setTimeout(() {router.push(/mine);}, 3000);
});button clicklookDetail(item, index)点击查看/buttonlet lookDetail (item, index) {router.push({name: xiangqing,params: {index: index,title: item,},});
};
