做系统的网站好,广告网站布局,重庆工程交易信息网,wap网站psd文章目录 路由原理#xff08;hash#xff09;路由安装和使用#xff08;vue2#xff09;路由跳转路由的传参和取值嵌套路由路由守卫完整代码 路由原理#xff08;hash#xff09;
单页应用的路由模式有两种
哈希模式#xff08;利用hashchange 事件监听 url的hash 的… 文章目录 路由原理hash路由安装和使用vue2路由跳转路由的传参和取值嵌套路由路由守卫完整代码 路由原理hash
单页应用的路由模式有两种
哈希模式利用hashchange 事件监听 url的hash 的改变
哈希模式的原理 哈希模式下哈希部分的改变不会触发浏览器向服务器发送新的请求所有的路由都会发送到同一个HTML文件。这意味着即使在前端进行页面导航服务器也不需要额外的配置因为所有的路由都会被前端路由器处理。 Video_2023-08-25_110736 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp头部router-link toger个人/router-linkrouter-link tologin登录/router-linkbutton clicklogins登录/buttonbutton clickgers个人/buttonbrbutton clickgersidapl 带参数的个人/buttonrouter-link :to{path:/login,query:{id:queryid}}带查询参数的登录link/router-linkbrrouter-link :to{name:login,params:{id:queryid}}路由参登录link/router-linkbutton clickgersidhsapl 带参数的个人/buttonhr!-- 下面是路由出口 --router-view :key$route.fullPath/router-view尾部/div
/body
script src../js/vue2.7.js/script
script src../js/vue-router.js/scriptscript//安装路由,前提要导入路由jsVue.use(VueRouter)//创建一个登录子组件var login{template:div登录页面 /div,mounted(){console.log(this.$route.query.id);console.log(this.$route.params.id);}}//创建一个登录子组件var ger{template:div个人页面 /div,mounted(){console.log(this.$route.query.id);console.log(this.$route.params.id);}}//创建路由配置实例,主要实现 路径和子组件时间的映射var myrouter new VueRouter({routes:[{path:/login,name:login,component:login},{path:/ger,name:ger,component:ger}]})var appnew Vue({el:#app,router:myrouter,data(){return{queryid:1}},methods:{logins(){this.$router.push({path:/login});},gers(){this.$router.replace({path:/ger})},gersid(){this.$router.push({path:/ger,query:{id:this.queryid}})},gersidhs(){this.$router.push({name:ger,params:{id:6}});}}})/script
/htmlhistory模式使用此模式需要后台配合把接口都打到我们打包后的index.html上 hash模式的原理 核心是锚点值的改变我们监听到锚点值改变了就去局部改变页面数据不做跳转。跟传统开发模式url改变后 立刻发起请求响应整个页面渲染整个页面比路由的跳转用户体验更好
!DOCTYPE html
htmlheadmeta charsetutf-8title单页面跳转的原理/title/headbodya href#/login登录/a|a href#/register注册/adiv idapp/divscript typetext/javascriptvar appDom document.getElementById(app);window.addEventListener(hashchange,function(){console.log(location.hash);switch(location.hash){case #/login:appDom.innerHTML 登录;break;case #/register:appDom.innerHTML注册;break;}})/script/body
/html路由安装和使用vue2
导入路由插件
script srcjs/vue-router.js typetext/javascript charsetutf-8/script安装路由插件到Vue中
Vue.use(VueRouter);创建VueRouter对象
var Login Vue.extends({template:div我是登录页面/div
});
// 创建VueRouter对象,并配置路由
var myRouter new VueRouter({// 配置路由routes:[// 指定路由链接、路由名称、路由页面组件{path:/login,name:login,component:Login}]
});使用路由
var myvue new Vue({el:#app,// 引入到vue 实例中并在模板中使用router-viewrouter:myRouter,template:div头部router-view/router-view尾部/div
})路由跳转
路由的跳转有两种方式
使用标签
router-link to/login/router-link编程式路由使用js
this.$router.push({path:/login});
this.$router.replace({path:/login});说明
this.$router.push(); 会向history中添加记录this.$router.replace();不会向history中添加记录。this.$router.go(-1)常用来做返回上一个地址。
路由中的对象
this.$route 路由信息对象只读。this.$router 路由操作对象只写。
路由的传参和取值
查询参 配置。查询参可以和path属性匹配也可以和name属性匹配。 router-link :to{path:/login,query:{id:queryid}}/router-link或者router-link :to{name:login,query:{id:queryid}}/router-link或者this.$router.push({path:/login,query:{id:queryid}});取参 路由参 配置路由规则 var router new VueRouter({
routers:[// 需要在配置路由规则时使用冒号指定参数{name:login,path:/login/:id,component:LoginVue}
]
});配置。意在这里path和params两个参数不能同时使用 router-link :to{name:login,params:{id:paramId}}/router-link或者this.$router.push({name:login,params:{id:this.paramId}});取参 this.$route.params.id;注意相同路由但参数不同。造成页面不刷新的问题。router-view :key$route.fullPath/router-view嵌套路由
路由间有层级关系。他们在模板中也有嵌套关系。可以一次性配置多个路由。
var Nav {template:divrouter-link :to{name:nav.index}首页/router-linkrouter-link :to{name:nav.personal}个人中心/router-linkrouter-link :to{name:nav.message}消息/router-linkrouter-view/router-view/div};var Index {template:div首页/div}var Personal {template:div个人中心/div}var Message {template:div消息/div}var router new VueRouter({routes:[{path:/nav,name:nav,component:Nav,children:[{path:,redirect:/nav/index},{path:index,name:nav.index,component:Index},{path:personal,name:nav.personal,component:Personal},{path:message,name:nav.message,component:Message}]},{path:,redirect:/nav}]});var app01 new Vue({el:#app,template:divrouter-view/router-view/div,router
});路由守卫
可以做验证判断使用路由的钩子函数beforeEach实现
let app new Vue({el: #app01,router:myRouter,mounted() {this.$router.beforeEach((to,from,next){console.log(to);if(to.path/nav/index){// 跳转到目标路由next();}else{setTimeout(function(){next();},2000);}});}});完整代码 Video_2023-08-28_105346 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapprouter-view :key$route.fullPath/router-view/div
/body
script src../js/vue2.7.js/script
script src../js/vue-router.js/script
script//安装路由,前提要导入路由jsVue.use(VueRouter)//导航子组件,以及路由var nav {template:divrouter-link :to{name:nav.index}首页/router-linkrouter-link :to{name:nav.personal}个人中心/router-linkrouter-link :to{name:nav.message}消息/router-linkrouter-view/router-view/div};var Index {template:div首页/div}var Personal {template:div个人中心/div}var Message {template:div消息/div}var routernew VueRouter({routes:[{path:/nav,name:nav, component:nav,children:[{path:,redirect:/nav/index},{path:index,name:nav.index,component:Index},{path:personal,name:nav.personal,component:Personal},{path:message,name:nav.message,component:Message}]},{path:,redirect:/nav}]});var appnew Vue({el:#app,router,mounted() {this.$router.beforeEach((to,from,next){console.log(to);if(to.path/nav/index){//判断跳转的是否是首页,否延时2秒后跳转// 跳转到目标路由next();}else{setTimeout(function(){next();},2000);}});}});
/script
/html
