Vue基础23

• 路由
• • 路由的query参数
  • • src/router/index.js
    • Detail.vue
    • HomeMessage.vue
    • 路由的query参数
  • 命名路由
  • • src/router/index.js
    • HomeMessage.vue
    • App.vue
    • 总结
  • 路由的params参数
  • • src/router/index.js
    • HomeMessage.vue
    • Detail.vue
    • 总结

路由

路由的query参数

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:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:HomeNews},{path:'message',component:HomeMessage,children:[{path:'detail',component:Detail}]}]}]
})

Detail.vue

HomeMessage.vue

路由的query参数

1. 传递参数

{{m.title}}

{{m.title}}

2. 接收参数

$route.query.id
$route.query.title

命名路由

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',component:Detail}]}]}]
})

HomeMessage.vue

App.vue

总结

1. 作用：可以简化路由的跳转
2. 如何使用
   （1）给路由命名：

routes:[{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello', //给路由命名path:'welcome',component:Hello}]}]}]

（2）简化跳转

跳转
跳转
跳转

路由的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}]}]}]
})

HomeMessage.vue

Detail.vue

总结

1. 配置路由，声明接收params参数

{path:'/home',component:Home,children:[{path:'news',component:HomeNews},{path:'message',component:HomeMessage,children:[{name:'xiangqing',path:'detail/:id/:title',  //nodejs的占位符，后面会填充内容(使用占位符声明接收params参数)component:Detail}]}]
}

2. 传递参数

跳转跳转

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必使用name配置！

3. 接收参数

$route.params.id
$route.params.title