网站建设中要多使用图片,兰州做网站客户,wordpress pre插件,商用图片的网站目录 1 路由介绍1.思考2.路由的介绍3.总结 2 路由的基本使用1.目标2.作用3.说明4.官网5.VueRouter的使用#xff08;52#xff09;6.代码示例7.两个核心步骤8.总结 3 组件的存放目录问题1.组件分类2.存放目录3.总结 4 路由的封装抽离5 Vue路由-重定向1.问题2.解决方案3.语法4… 目录 1 路由介绍1.思考2.路由的介绍3.总结 2 路由的基本使用1.目标2.作用3.说明4.官网5.VueRouter的使用526.代码示例7.两个核心步骤8.总结 3 组件的存放目录问题1.组件分类2.存放目录3.总结 4 路由的封装抽离5 Vue路由-重定向1.问题2.解决方案3.语法4.代码演示 6 Vue路由-4041.作用2.位置3.语法4.代码示例 7 Vue路由-模式设置1.问题2.语法 1 路由介绍 1.思考
单页面应用程序之所以开发效率高性能好用户体验好
最大的原因就是页面按需更新 比如当点击【发现音乐】和【关注】时只是更新下面部分内容对于头部是不更新的
要按需更新首先就需要明确访问路径和 组件的对应关系
访问路径 和 组件的对应关系如何确定呢 路由
2.路由的介绍
生活中的路由设备和ip的映射关系 Vue中的路由路径和组件的映射关系 3.总结
什么是路由Vue中的路由是什么
2 路由的基本使用
1.目标
认识插件 VueRouter掌握 VueRouter 的基本使用步骤
2.作用
修改地址栏路径时切换显示匹配的组件
3.说明
Vue 官方的一个路由插件是一个第三方包
4.官网
https://v3.router.vuejs.org/zh/
5.VueRouter的使用52
固定5个固定的步骤不用死背熟能生巧 下载 VueRouter 模块到当前工程版本3.6.5 yarn add vue-router3.6.5main.js中引入VueRouter import VueRouter from vue-router安装注册 Vue.use(VueRouter)创建路由对象 const router new VueRouter()注入将路由对象注入到new Vue实例中建立关联 new Vue({render: h h(App),router:router
}).$mount(#app)
当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了 6.代码示例
main.js
// 路由的使用步骤 5 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中建立关联import VueRouter from vue-router
Vue.use(VueRouter) // VueRouter插件初始化const router new VueRouter()new Vue({render: h h(App),router
}).$mount(#app)7.两个核心步骤
创建需要的组件 (views目录)配置路由规则 配置导航配置路由出口(路径匹配的组件显示的位置) App.vue div classfooter_wrapa href#/find发现音乐/aa href#/my我的音乐/aa href#/friend朋友/a
/div
div classtoprouter-view/router-view
/div8.总结
如何实现 路径改变对应组件 切换,应该使用哪个插件?Vue-Router的使用步骤是什么(52)?
3 组件的存放目录问题
注意 .vue文件 本质无区别
1.组件分类
.vue文件分为2类都是 .vue文件本质无区别
页面组件 配置路由规则时使用的组件复用组件多个组件中都使用到的组件 2.存放目录
分类开来的目的就是为了 更易维护 src/views文件夹 页面组件 - 页面展示 - 配合路由用 src/components文件夹 复用组件 - 展示数据 - 常用于复用
3.总结
组件分类有哪两类分类的目的不同分类的组件应该放在什么文件夹作用分别是什么
4 路由的封装抽离
问题所有的路由配置都在main.js中合适吗
目标将路由模块抽离出来。 好处拆分模块利于维护 路径简写
脚手架环境下 指代src目录可以用于快速引入组件
5 Vue路由-重定向
1.问题
网页打开时 url 默认是 / 路径未匹配到组件时会出现空白 2.解决方案
重定向 → 匹配 / 后, 强制跳转 /home 路径
3.语法
{ path: 匹配路径, redirect: 重定向到的路径 },
比如
{ path:/ ,redirect:/home }4.代码演示
const router new VueRouter({routes: [{ path: /, redirect: /home},...]
})6 Vue路由-404
1.作用
当路径找不到匹配时给个提示页面
2.位置
404的路由虽然配置在任何一个位置都可以但一般都配置在其他路由规则的最后面
3.语法
path: “*” (任意路径) – 前面不匹配就命中最后这个
import NotFind from /views/NotFindconst router new VueRouter({routes: [...{ path: *, component: NotFind } //最后一个]
})4.代码示例
NotFound.vue
templatedivh1404 Not Found/h1/div
/templatescript
export default {}
/scriptstyle/stylerouter/index.js
...
import NotFound from /views/NotFound
...// 创建了一个路由对象
const router new VueRouter({routes: [...{ path: *, component: NotFound }]
})export default router7 Vue路由-模式设置
1.问题
路由的路径看起来不自然, 有#能否切成真正路径形式?
hash路由(默认) 例如: http://localhost:8080/#/homehistory路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持开发环境webpack给规避掉了history模式的问题)
2.语法
const router new VueRouter({mode:histroy, //默认是hashroutes:[]
})
