Vue基础24

• 路由
• • 路由的props配置
  • • 第一种：对象式
    • • src/router/index.js
      • Detail.vue
    • 第二种：布尔值（只适用于params参数时候）
    • • src/router/index.js
      • Detail.vue
    • 第三种：函数式（适用query,params两种）
    • • src/router/index.js
      • HomeMessage.vue
      • Detail.vue
    • 总结
  • \的replace属性
  • • 浏览器默认的push模式
    • 使用replace之后
    • • 只给About和Home上面加replace
      • • App.vue
      • 只给news和message上面加replace
      • • Home.vue
    • 总结

路由

路由的props配置

第一种：对象式

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import HomeNews from "@/pages/HomeNews";
import HomeMessage from "@/pages/HomeMessage";
import Detail from "@/pages/Detail";//创建并暴露一个路由器
export default new VueRouter({routes:[{name:'guanyu',path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:HomeNews},{path:'message',component:HomeMessage,children:[{name:'xiangqing',path:'detail/:id/:title',  //nodejs的占位符，后面会填充内容component:Detail,//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件props:{a:1,b:'你好啊'},}]}]}]
})

Detail.vue

第二种：布尔值（只适用于params参数时候）

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import HomeNews from "@/pages/HomeNews";
import HomeMessage from "@/pages/HomeMessage";
import Detail from "@/pages/Detail";//创建并暴露一个路由器
export default new VueRouter({routes:[{name:'guanyu',path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:HomeNews},{path:'message',component:HomeMessage,children:[{name:'xiangqing',path:'detail/:id/:title',  //nodejs的占位符，后面会填充内容component:Detail,//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件// props:{a:1,b:'你好啊'},//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件props:true,}]}]}]
})

Detail.vue

第三种：函数式（适用query,params两种）

src/router/index.js

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "@/pages/About";
import Home from "@/pages/Home";
import HomeNews from "@/pages/HomeNews";
import HomeMessage from "@/pages/HomeMessage";
import Detail from "@/pages/Detail";//创建并暴露一个路由器
export default new VueRouter({routes:[{name:'guanyu',path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:HomeNews},{path:'message',component:HomeMessage,children:[{name:'xiangqing',// path:'detail/:id/:title',  //nodejs的占位符，后面会填充内容path:'detail',  //query的写法component:Detail,//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件// props:{a:1,b:'你好啊'},//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件// props:true,//props的第三种写法：函数式(最普通的写法)/*props($route){return {id:$route.query.id,title:$route.query.title}}*///第三种：函数式（解构赋值的写法）/*props({query}){return{id:query.id,title:query.title}}*///第三种：函数式(解构赋值之后再解构赋值)props({query:{id,title}}){return {id,title}}}]}]}]
})

HomeMessage.vue

Detail.vue

总结

1. 作用：让路由组件更方便的收到参数

{name:'xiangqing',// path:'detail/:id/:title',  //nodejs的占位符，后面会填充内容path:'detail',  //query的写法component:Detail,//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件// props:{a:1},//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件// props:true,//props的第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件props($route){return { id:$route.query.id,title:$route.query.title}}
}

的replace属性

浏览器默认的push模式

栈的方式存储

使用replace之后

只给About和Home上面加replace

App.vue

只给news和message上面加replace

Home.vue

总结

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：分别是push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
3. 如何开启replace模式：News