项目文件目录置文章底部,见最后的图片为参考,这里以该目录讲解
vue路由配置:(在router/index.js中配置)
vue支持两种模式:
- hash : #/home
- history : /home
路由原理
- hash路由 ==> location.hash 切换,window.onhashchange 监听路径的切换
- history路由==> history.pushState 切换,window.onpopstate 监听路径的切换
举例,具体操作
- 即浏览器路径的输入:(例如)
path:’/film’, (访问:http://www.jerrybro.cn/film)
component: NowPlaying (先将该路径下要显示的Vue组件页面导入,且取名NowPlaying)
以此类推可配置二级路由,写在children:[{},{}]中:
path:’/film/comingsoon’,
component: Comingsoon
- 注意: 二级路由的组件使用,只能在一级路由组件中的< router-view >使用。如上描述的:NowPlaying.vue中使用< router-view >标签来显示Comingsoon组件的内容!
- 动态路由(即能够匹配路径后面加的内容)
/*
若路径只写:www.jerrybro.cn/detail 后面没加内容了,
则会匹配不到,则默认当空(www.jerrybro.cn)处理
*/
// 路由跳转【第二种方式】:通过命名路由跳转
// 路由跳转【第一种方式】:this. r o u t e r . p u s h ( ‘ / d e t a i l