vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件

时间:2022-01-31 10:41:57
  • 后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源
  • 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换(不会刷新页面),同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现
  • 在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由)

路由的导入:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
路由的创建:

HTML部分
vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件

JavaScript部分
vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件
CSS部分
vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件
路由规则中定义参数:query(路由配置规则中的path属性不用修改)
                                    params
vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件
vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件
vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件
子路由:
vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件
同时展示多个组件:
vue学习(6)-路由(导入包;创建子组件;创建路由对象)传参,子路由,多个组件