vue-learning:37 - router - 目录
vue路由vue-router
目录
- 前端路由历史
- 服务端渲染(SSR:server side render)
- 客户端路由(client side routing)
- 前端路由实现原理
- hash模式: location.hash 和 hashChange事件
- history模式: history 和 popstate事件
- vue-router
- const router = new VueRouter(option)中的选项对象option
- 路由器实例对象router
- 路由对象route
- router-link标签的特性
- router-view标签的特性
- 路由传参的5种方式
1.路由动态参数: '/user/:userId'和params
2.命名路由传参,使用name和paramsconst route = {path: '/user/:userId'} this.$router.push({path:`/user/${userId}`}) this.$route.params.userId
3.查询参数传参,使用path和queryconst route = {name:'home',...} this.$router.push({name:'Login',params:{id:'leelei'}}) this.$route.params.id
4.prop形式:布尔/对象/函数this.$router.push({path:'/login',query:{id:'leelei'}) this.$route.query.id
5.meta元信息定义数据const route = [{prop:true, ...}] const route = [{prop: {someProp:'someValue'}] const routes =[{props: (route) => ({ query: route.query.q }),...}]
// 定义路由时,定义元信息 const routes = [ {meta: {someData:'someData'},... }, // 获取数据 this.$route.meta.someData