Vue-router(跳转页面)
路由的基本配置
//第一步
import { createRouter,createWebHashHistory} from "vue-router"
//第二步
// <> ts 泛型:类型不定,可推断
const routers:Array<RouteRecordRaw>=[
//路由对象,必须属性path, name ,component
//meta:{}
{
path:'',
name:'',
compoent:' '
},
{
path:'',
name:'',
compoent:()=>import("url") //异步引入组件 优化性能 在页面跳转时渲染
}
]
//第三步
//生命路由对象
const router = createRouter({
history:createWebHashHistory(),
router:routes
})
export defalut router
路由守卫(进入到某个路由就会执行此方法)
//路由守卫
router.beforeEach((to,from,next)=>{
//from 从哪个路由跳转的
//to 到达的路由 (手动更改to、from相同)
//必须执行next
next()
})
<router-link to="/a">about</router-link> //类似a标签
<!-- 带参数形式 -->
<router-link :to='{name:"index",qurey:{id:1,name:"bag"}'>about</router-link> //类似a标签
路由传参取参
<vant-button type="primary" @click="handleClick1"></vant-button>
<script>
import { useRoute,useRouter} from "vue-router"
route = useRoute()//用来获取路由对象的数据
router = useRouter()//路由对象进行路由跳转
handleClick1(){
//path最好搭配query
this.route.push({
path:'/a',
query:{ //query刷新不丢失
id:123
}
})
}
handleClick2(){
//params传参必须是name
this.route.push({
name:'/a',
params:{ //params刷新数据丢失
id:123
}
})
}
</script>