1、路由router
pnpm i vue-router
2、创建使用环境
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 router
2.main.ts文件中配置
import router from './router' const app= createApp ( App) app. use ( router)
3.页面中使用 RouterView, RouterLink
< template> < div class = "box" > < div class = "nav-box" > < RouterLink to= "/home" > 首页< / RouterLink> < RouterLink to= "/goods" > 商品< / RouterLink> < RouterLink to= "/mine" > 我的< / RouterLink> < / div> < div class = "content-box" > < RouterView> < / RouterView> < / div> < / div>
< / template> < script setup lang= "ts" >
import { RouterView, RouterLink } from "vue-router" ;
< / script> < style lang= "scss" scoped>
. box { . nav- box { background- color: red; display : flex; > a { flex : 1 ; border : 1px solid #00ff00; text- align: center; } }
}
< / style>
to 的两种写法
< RouterLink to= "/home" > 首页< / RouterLink> < RouterLink to= "/goods" > 商品< / RouterLink> < RouterLink to= "/mine" > 我的< / RouterLink>
< RouterLink: to= "{ path : '/mine' , } "> 我的< / RouterLink>
命名路由
{ path : "/home" , name : 'homePage' , component : ( ) => import ( "../pages/Home.vue" ) , } , { path : "/goods" , name : 'goodsPage' , component : ( ) => import ( '../pages/Goods.vue' ) , children : [ { path : '/detial' , component : ( ) => import ( '../pages/GoodsDeatil.vue' ) } ] } , { path : "/mine" , name : 'mine' , component : ( ) => import ( '../pages/Mine.vue' ) , } , < RouterLink: to= "{ name : 'mine' , } "> 我的< / RouterLink>
嵌套路由
{ path : "/goods" , name : 'goodsPage' , component : ( ) => import ( '../pages/Goods.vue' ) , children : [ { path : 'detial' , component : ( ) => import ( '../pages/GoodsDeatil.vue' ) } ] } , < template> < div class = "box" > < div class = "left" > < ul> < li v- for = "(item, index) in goods" : key= "index" > < RouterLink to= "/goods/detial" > { { item } } < / RouterLink> < / li> < / ul> < / div> < div class = "right" > < RouterView> < / RouterView> < / div> < / div>
< / template>
query 传参
< ! -- 第一种写法 -- > < RouterLink : to= "`/goods/detial?index=${index}&title=${item}`" > { { item } } < / RouterLink> < ! -- 第二种写法 -- > < RouterLink: to= "{ path : '/goods/detial' , query : { index : index, title : item, } , } "> { { item } } < / RouterLink> < ! -- < template> < div> 商品详情{ { router. query. index } } -- - { { router. query. title } } < / div>
< / template> -- >
< template> < div> 商品详情{ { query. index } } -- - { { query. title } } < / div>
< / template> < script setup lang= "ts" >
import { toRefs } from "vue" ;
import { useRoute } from "vue-router" ;
let router = useRoute ( ) ; let { query } = toRefs ( router) ;
< / script> < style lang= "scss" scoped> < / style>
params 传参
{ path : "/goods" , name : 'goodsPage' , component : ( ) => import ( '../pages/Goods.vue' ) , children : [ { path : 'detial/:index/:title' , component : ( ) => import ( '../pages/GoodsDeatil.vue' ) } ] } , < router- link : to= "`/goods/detial/${index}/${item}`" > { { item } } < / router- link> < template> < div> 商品详情{ { params. index } } -- - { { params. title } } < / div>
< / template> < script setup lang= "ts" >
import { toRefs } from "vue" ;
import { useRoute } from "vue-router" ;
let router = useRoute ( ) ; console. log ( router) ; let { params } = toRefs ( router) ;
{ path : "/goods" , name : 'goodsPage' , component : ( ) => import ( '../pages/Goods.vue' ) , children : [ { path : 'detial/:index/:title' , name : 'xiangqing' , component : ( ) => import ( '../pages/GoodsDeatil.vue' ) } ] } , < ! -- 第二种写法 -- > < router- link: to= "{ name : 'xiangqing' , params : { index : index, title : item, } , } "> { { item } } < / router- link>
路由组件props(params 传参)
{ path : "/goods" , name : 'goodsPage' , component : ( ) => import ( '../pages/Goods.vue' ) , children : [ { path : 'detial/:index/:title?' , name : 'xiangqing' , props : true , component : ( ) => import ( '../pages/GoodsDeatil.vue' ) } ] } , < template> < div> 商品详情{ { index } } -- - { { title } } < / div>
< / template> < script setup lang= "ts" >
import { toRefs } from "vue" ; defineProps ( [ "index" , "title" ] ) ;
< / script> < style lang= "scss" scoped> < / style>
query传参 这样设置
props ( router ) { return router. query} ,
编程式导航
router- link 本质是a 标签< script setup lang= "ts" >
import { onMounted } from "vue" ; import { useRouter } from "vue-router" ; let router = useRouter ( ) ; onMounted ( ( ) => { setTimeout ( ( ) => { router. push ( "/mine" ) ; } , 3000 ) ;
} ) ; < button @click= "lookDetail(item, index)" > 点击查看< / button> let lookDetail = ( item, index ) => { router. push ( { name : "xiangqing" , params : { index : index, title : item, } , } ) ;
} ;