一、初识路由
1、后端路由
☆路由:对应关系
一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。
2、前端路由
二、vue-router
1、vue-router工作原理
hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。
hash模式:
地址中永远带着#号,不美观 。
若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。
兼容性较好。
history模式:
地址干净,美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。
2、vue-router基本使用
一个对应关系就是一条路由
超链接,点击触发to对应内容。
占位符
//等价于router:router [router选项:router对象]
router
3、路由对象属性
路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。
通过切换,“隐藏”了的路由组件,默认是被销毁掉的,需要的时候再去挂载。
每个组件都有自己的
r
o
u
t
e
属
性
,
里
面
存
储
着
自
己
的
路
由
信
息
。
整
个
应
用
只
有
一
个
r
o
u
t
e
r
,
可
以
通
过
组
件
的
‘
route属性,里面存储着自己的路由信息。 整个应用只有一个router,可以通过组件的`
route属性,里面存储着自己的路由信息。整个应用只有一个router,可以通过组件的‘router`属性获取到。
三、用户登录注册案例
1)通过webpack-dev-server启动项目
2)–inline:一种刷新模式,可以监听文件变化,让页面刷新
3)–hot:热加载模式,前端代码改变不需要全部刷新,只替换部分
4)–port:端口,本例通过8088访问
//以上命令
npm init -y
npm install vue@2.6.x vue-router@3.1.x
npm install webpack@4.39.x webpack-cli@3.3.x webpack-dev-server@3.8.x html-webpack-plugin@3.2.x -D
npm install vue-loader@15.7.x vue-template-compiler@2.6.x -D
npm install css-loader@3.2.x style-loader@1.0.x -D
npm install less less-loader -D
npm install sass-loader@7.2.x node-sass@4.12.x -D
npm install stylus stylus-loader -D
npm install url-loader@2.1.x file-loader@4.2.x -D
npm run dev
通过import from导入不需添加.js便可引入js文件。
{path:'/',redirect:'/login'}//重定向:当用户访问/时,重定向到/login
#是哈希模式,非#是history模式
beforeeach是路由钩子函数,每个页面执行前都要执行这个逻辑
to:目标路由对象,from:来源路由对象,next:执行下一步操作
1、全局导航钩子:
①全局守卫: router.beforeEach
②全局解析守卫: router.beforeResolve
③全局后置钩子: router.afterEach
2、路由独享钩子: beforeEnter
3、组件内的导航钩子: beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave
完整讲解请见vue-router有哪几种导航钩子?和vue-router有哪几种导航钩子( 导航守卫 )?
四、动态路由
1、动态路由:匹配可以传递参数的路由
2、query方式传参
//语法:?传递,?后面不参与匹配,?传参不需要通过动态路由处理
?参数名=参数值&参数名=参数值...
3.params方式传参
五、嵌套路由
children和routes一样,都是数组
router//挂载路由
六、命名路由
七、命名视图
八、编程式导航
1、router.push()
params传参
2、router.replace()
3、router.go()
使用push产生历史记录后,才可以使用go后退。
路由独有生命周期钩子函数
作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。
具体名字:
activated路由组件被激活时触发。
deactivated路由组件失活时触发。
课后题:
2.请简述 vue-router 路由的作用。
前端路由,用于切换页面,却不像后端路由那样每次切换页面都要请求服务器,响应快,提升用户体验
3.请简单列举并说明路由对象包括哪些属性。
this.$router,全局路由对象
this.$route,当前路由对象
$route.path:对应当前路由名字
$route.query:{key : value} URL 查询参数
$route.params:{key : value} 路由转跳携带参数
$route.hash:在 history 模式下获取当前路由的 hash 值
$route.fullPath:完成解析后的URL,包含查询参数和 hash 的完整路径
$route.name:当前路由名称
$route.matched:路由记录,当前路由下路由声明的所有信息,从父路由(如果有)到当前路由为止
$route.redirectedFrom:若有重定向,即为重定向来源的路由