网站建设与管理试卷答案,iis7.5网站配置,discuzq主题,野花韩国视频观看免费高清的路由介绍
1.思考
单页面应用程序#xff0c;之所以开发效率高#xff0c;性能好#xff0c;用户体验好
最大的原因就是#xff1a;页面按需更新
比如当点击【发现音乐】和【关注】时#xff0c;只是更新下面部分内容#xff0c;对于头部是不更新的
要按需更新#…路由介绍
1.思考
单页面应用程序之所以开发效率高性能好用户体验好
最大的原因就是页面按需更新
比如当点击【发现音乐】和【关注】时只是更新下面部分内容对于头部是不更新的
要按需更新首先就需要明确访问路径和 组件的对应关系
访问路径 和 组件的对应关系如何确定呢 路由
2.路由的介绍
生活中的路由设备和ip的映射关系
Vue中的路由路径和组件的映射关系
3.总结
什么是路由Vue中的路由是什么
路由的基本使用
1.目标
认识插件 VueRouter掌握 VueRouter 的基本使用步骤
2.作用
修改地址栏路径时切换显示匹配的组件
3.说明
Vue 官方的一个路由插件是一个第三方包
4.官网
Vue Router
5.VueRouter的使用52
固定5个固定的步骤不用死背熟能生巧
下载 VueRouter 模块到当前工程版本3.6.5
yarn add vue-router3.6.5
main.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
/div
8.总结
如何实现 路径改变对应组件 切换,应该使用哪个插件?Vue-Router的使用步骤是什么(52)?
组件的存放目录问题
注意 .vue文件 本质无区别
1.组件分类
.vue文件分为2类都是 .vue文件本质无区别
页面组件 配置路由规则时使用的组件复用组件多个组件中都使用到的组件
2.存放目录
分类开来的目的就是为了 更易维护
src/views文件夹 页面组件 - 页面展示 - 配合路由用src/components文件夹 复用组件 - 展示数据 - 常用于复用
3.总结
组件分类有哪两类分类的目的不同分类的组件应该放在什么文件夹作用分别是什么
路由的封装抽离
问题所有的路由配置都在main.js中合适吗
目标将路由模块抽离出来。 好处拆分模块利于维护
路径简写
脚手架环境下 指代src目录可以用于快速引入组件
声明式导航-导航链接
1.需求 实现导航高亮效果
如果使用a标签进行跳转的话需要给当前跳转的导航加样式同时要移除上一个a标签的样式太麻烦
2.解决方案
vue-router 提供了一个全局组件 router-link (取代 a 标签)
能跳转配置 to 属性指定路径(必须) 。本质还是 a 标签 to 无需 #能高亮默认就会提供高亮类名可以直接设置高亮样式
语法 发现音乐 divdiv classfooter_wraprouter-link to/find发现音乐/router-linkrouter-link to/my我的音乐/router-linkrouter-link to/friend朋友/router-link/divdiv classtop!-- 路由出口 → 匹配的组件所展示的位置 --router-view/router-view/div/div
3.通过router-link自带的两个样式进行高亮
使用router-link跳转后我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active
我们可以给任意一个class属性添加高亮样式即可实现功能
4.总结
router-link是什么router-link怎么用router-link的好处是什么
声明式导航-两个类名
当我们使用跳转时自动给当前导航加了两个类名
1.router-link-active
模糊匹配用的多
to/my 可以匹配 /my /my/a /my/b ....
只要是以/my开头的路径 都可以和 to/my匹配到
2.router-link-exact-active
精确匹配
to/my 仅可以匹配 /my
3.在地址栏中输入二级路由查看类名的添加
4.总结
router-link 会自动给当前导航添加两个类名有什么区别呢 声明式导航-自定义类名了解
1.问题
router-link的两个高亮类名 太长了我们希望能定制怎么办 2.解决方案
我们可以在创建路由对象时额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass
const router new VueRouter({routes: [...],linkActiveClass: 类名1,linkExactActiveClass: 类名2
})
3.代码演示
// 创建了一个路由对象
const router new VueRouter({routes: [...], linkActiveClass: active, // 配置模糊匹配的类名linkExactActiveClass: exact-active // 配置精确匹配的类名
})
4.总结
如何自定义router-link的两个高亮类名 声明式导航-查询参数传参
1.目标
在跳转路由时进行传参
比如现在我们在搜索页点击了热门搜索链接跳转到详情页需要把点击的内容带到详情页改怎么办呢
2.跳转传参
我们可以通过两种方式在跳转的时候把所需要的参数传到其他页面中
查询参数传参动态路由传参
3.查询参数传参 如何传参如何接受参数 固定用法$router.query.参数名
4.代码演示
App.vue templatediv idappdiv classlinkrouter-link to/home首页/router-linkrouter-link to/search搜索页/router-link/divrouter-view/router-view/div
/templatescript
export default {};
/scriptstyle scoped
.link {height: 50px;line-height: 50px;background-color: #495150;display: flex;margin: -8px -8px 0 -8px;margin-bottom: 50px;
}
.link a {display: block;text-decoration: none;background-color: #ad2a26;width: 100px;text-align: center;margin-right: 5px;color: #fff;border-radius: 5px;
}
/style Home.vue templatediv classhomediv classlogo-box/divdiv classsearch-boxinput typetextbutton搜索一下/button/divdiv classhot-link热门搜索router-link to黑马程序员/router-linkrouter-link to前端培训/router-linkrouter-link to如何成为前端大牛/router-link/div/div
/templatescript
export default {name: FindMusic
}
/scriptstyle
.logo-box {height: 150px;background: url(/assets/logo.jpeg) no-repeat center;
}
.search-box {display: flex;justify-content: center;
}
.search-box input {width: 400px;height: 30px;line-height: 30px;border: 2px solid #c4c7ce;border-radius: 4px 0 0 4px;outline: none;
}
.search-box input:focus {border: 2px solid #ad2a26;
}
.search-box button {width: 100px;height: 36px;border: none;background-color: #ad2a26;color: #fff;position: relative;left: -2px;border-radius: 0 4px 4px 0;
}
.hot-link {width: 508px;height: 60px;line-height: 60px;margin: 0 auto;
}
.hot-link a {margin: 0 5px;
}
/style Search.vue templatediv classsearchp搜索关键字: 黑马程序员/pp搜索结果: /pulli............./lili............./lili............./lili............./li/ul/div
/templatescript
export default {name: MyFriend,created () {// 在created中获取路由参数}
}
/scriptstyle
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
/style router/index.js import Home from /views/Home
import Search from /views/Search
import Vue from vue
import VueRouter from vue-router
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router new VueRouter({routes: [{ path: /home, component: Home },{ path: /search, component: Search }]
})export default router main.js ...
import router from ./router/index
...
new Vue({render: h h(App),router
}).$mount(#app) 五、声明式导航-动态路由传参 1.动态路由传参方式 配置动态路由
动态路由后面的参数可以随便起名但要有语义 const router new VueRouter({routes: [...,{ path: /search/:words, component: Search }]
}) 配置导航链接 to/path/参数值对应页面组件接受参数 $route.params.参数名
params后面的参数名要和动态路由配置的参数保持一致
2.查询参数传参 VS 动态路由传参
查询参数传参 (比较适合传多个参数) 跳转to/path?参数名值参数名2值获取$route.query.参数名
动态路由传参 (优雅简洁传单个参数比较方便) 配置动态路由path: /path/:参数名跳转to/path/参数值获取$route.params.参数名
注意动态路由也可以传多个参数但一般只传一个 3.总结
声明式导航跳转时, 有几种方式传值给路由页面 查询参数传参多个参数动态路由传参一个参数优雅简洁 动态路由参数的可选符(了解)
1.问题 配了路由 path:/search/:words 为什么按下面步骤操作会未匹配到组件显示空白
2.原因
/search/:words 表示必须要传参数。如果不传参数也希望匹配可以加个可选符
const router new VueRouter({routes: [...{ path: /search/:words?, component: Search }]
})
Vue路由-重定向
1.问题
网页打开时 url 默认是 / 路径未匹配到组件时会出现空白
2.解决方案
重定向 → 匹配 / 后, 强制跳转 /home 路径
3.语法
{ path: 匹配路径, redirect: 重定向到的路径 },比如{ path:/ ,redirect:/home }
4.代码演示
const router new VueRouter({routes: [{ path: /, redirect: /home},...]})
Ve路由-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/style
router/index.js
...
import NotFound from /views/NotFound
...// 创建了一个路由对象
const router new VueRouter({routes: [...{ path: *, component: NotFound }]
})export default router 九、Vue路由-模式设置 1.问题 路由的路径看起来不自然, 有#能否切成真正路径形式? hash路由(默认) 例如: http://localhost:8080/#/homehistory路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持开发环境webpack给规避掉了history模式的问题)
2.语法
const router new VueRouter({mode:histroy, //默认是hashroutes:[]
})
编程式导航-两种路由跳转方式
1.问题
点击按钮跳转如何实现
2.方案
编程式导航用JS代码来进行跳转
3.语法
两种语法
path 路径跳转 简易方便name 命名路由跳转 (适合 path 路径长的场景)
4.path路径跳转语法
特点简易方便 //简单写法
this.$router.push(路由路径)//完整写法
this.$router.push({path: 路由路径
})
5.代码演示 path跳转方式
6.name命名路由跳转
特点适合 path 路径长的场景
语法
路由规则必须配置name配置项
{ name: 路由名, path: /path/xxx, component: XXX }, 通过name来进行跳转
this.$router.push({name: 路由名
})
7.代码演示通过name命名路由跳转
8.总结
编程式导航有几种跳转方式
编程式导航-path路径跳转传参
1.问题
点击搜索按钮跳转需要把文本框中输入的内容传到下一个页面如何实现
2.两种传参方式
1.查询参数
2.动态路由传参
3.传参
两种跳转方式对于两种传参方式都支持
① path 路径跳转传参
② name 命名路由跳转传参
4.path路径跳转传参query传参
//简单写法
this.$router.push(/路径?参数名1参数值1参数2参数值2)
//完整写法
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2}
}) 接受参数的方式依然是$route.query.参数名
5.path路径跳转传参动态路由传参
//简单写法
this.$router.push(/路径/参数值)
//完整写法
this.$router.push({path: /路径/参数值
})
接受参数的方式依然是$route.params.参数值
注意path不能配合params使用
十二、编程式导航-name命名路由传参
1.name 命名路由跳转传参 (query传参)
this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
})
2.name 命名路由跳转传参 (动态路由传参)
this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})
3.总结
编程式导航如何跳转传参
1.path路径跳转
query传参
this.$router.push(/路径?参数名1参数值1参数2参数值2)
this.$router.push({path: /路径,query: {参数名1: 参数值1,参数名2: 参数值2}
})
动态路由传参
this.$router.push(/路径/参数值)
this.$router.push({path: /路径/参数值
})
2.name命名路由跳转
query传参
this.$router.push({name: 路由名字,query: {参数名1: 参数值1,参数名2: 参数值2}
})
动态路由传参 (需要配动态路由)
this.$router.push({name: 路由名字,params: {参数名: 参数值,}
})
