专业网站制作公司,深圳app开发公司报价,php网站怎么样,修改wordpress的语言1、路由简介
vue-rooter#xff1a;是vue的一个插件库#xff0c;专门用来实现SPA应用
1.1、对SPA应用的理解
1、单页 Web 应用#xff08;single page web application#xff0c;SPA#xff09;。 2、整个应用只有一个完整的页面 index.html。 3、点击页面中的导航链…1、路由简介
vue-rooter是vue的一个插件库专门用来实现SPA应用
1.1、对SPA应用的理解
1、单页 Web 应用single page web applicationSPA。 2、整个应用只有一个完整的页面 index.html。 3、点击页面中的导航链接不会刷新页面只会做页面的局部更新。 4、数据需要通过 ajax 请求获取。 1.2、什么是路由
1、路由就是一组映射关系key - value多个路由需要路由器router进行管理。 2、key 为路径, value 可能是 function 或 component组件 3、vue 的一个插件库vue-router专门用来实现 SPA 应用
1.3、路由的分类
1.3.1、前端路由
1、key是路径value是组件component用于展示页面内容。 2、工作过程当浏览器的路径改变时, 对应的组件就会显示。 1.3.2、后端路由
1、key是路径value 是 function, 用于处理客户端提交的请求。(node.js) 2、工作过程服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。
2、基本使用 Vue2安装vue-router命令npm i vue-router3 Vue3安装vue-router命令npm i vue-router 2.1、编写路由配置项 index.js 该文件专门用于创建整个应用的路由器
//该文件专门用于创建整个应用的路由器import VueRouter from vue-router;
import About from /components/About;
import Home from /components/Home;//创建并默认暴露一个路由器
export default new VueRouter({routes:[{path:/about,component: About},{path:/home,component: Home}]
});
2.2、引入配置项并使用插件 main.js
//引入Vue
import Vue from vue;
//引入App
import App from ./App;
//引入vue-router
import VueRouter from vue-router;
import router from ./router;//关闭Vue的生产提示
Vue.config.productionTip false;//应用vue-router插件
Vue.use(VueRouter);new Vue({el: #app,render: h h(App),router
});
2.3、实现路由切换App.vue
使用router-link/router-link标签实现路由的切换 to“/xxx”是展示的路径 active-class是当点击部分的时候可展示的效果高亮样式
!--原始使用a标签跳转多个页面,多页面应用--
!--a classlist-group-item active href./about.htmlAbout/a--
!--a classlist-group-item href./home.htmlHome/a--!--vue中借助routerlink标签实现路由的切换--
router-link classlist-group-item active-classactive to/aboutAbout/router-link
router-link classlist-group-item active-classactive to/homeHome/router-link
完整的App.vue
templatedivdiv classrowdiv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div/divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!--原始使用a标签跳转多个页面,多页面应用--
!-- a classlist-group-item active href./about.htmlAbout/a--
!-- a classlist-group-item href./home.htmlHome/a--!--vue中借助routerlink标签实现路由的切换--router-link classlist-group-item active-classactive to/aboutAbout/router-linkrouter-link classlist-group-item active-classactive to/homeHome/router-link/div/divdiv classcol-xs-6div classpaneldiv classpanel-body!--router-view确定视图的位置--router-view/router-view/div/div/div/div/div
/templatescript
export default {name: App,
}
/script
style langcss scoped/style 2.4、指定展示的位置
决定组件展示的位置
router-view/router-view2.5、注意点
1、路由组件通常存放在src/pages文件夹一般组件通常存放在src/components文件夹。一般组件就按我们之前用法那么用路由组件的话就是靠router-link/router-link标签关联上index.js里配置的路由规则然后由router-view/router-view放到指定位置。
2、通过切换“隐藏”了的路由组件默认是被销毁掉的需要的时候再去挂载。所以切换的时候路由组件一直是 其他的销毁-当前的挂载 其他的销毁-当前的挂载 . … …
3、每个组件都有自己的$route属性里面存储着自己的路由信息。 4、整个应用只有一个router可以通过组件的$router属性获取到 $route:每个组件的route都不一样 $router:整个应用的router都是一样的且只有一个 三、嵌套多级路由
3.1、创建子组件
路由组件创建在pages中创建News.vue和Message.vue
News.vue
templateullinews001/lilinews002/lilinews003/li/ul/templatescriptexport default {name: News}/scriptstyle scoped/style
Message.vue
templatedivullia href/message1message001/anbsp;nbsp;/lilia href/message2message002/anbsp;nbsp;/lilia href/message/3message003/anbsp;nbsp;/li/ul/div/templatescriptexport default {name: Message}/scriptstyle scoped/style 3.2、路由的children配置项
router/index.js
//该文件专门用于创建整个应用的路由器import VueRouter from vue-router;
import About from /pages/About;
import Home from /pages/Home;
import News from /pages/News;
import Message from /pages/Message;//创建并默认暴露一个路由器
export default new VueRouter({routes:[{path:/about,component: About},{path:/home,component: Home,children:[{path: news,component: News},{path: message,component: Message}]}]
});
3.3、模板上写路由跳转
App.vue不变套娃是套在home里写在Home.vue中
要写完整路径而且加斜杠例如
router-link to/home/newsNews/router-linkApp.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!--原始使用a标签跳转多个页面,多页面应用--
!-- a classlist-group-item active href./about.htmlAbout/a--
!-- a classlist-group-item href./home.htmlHome/a--!--vue中借助routerlink标签实现路由的切换--router-link classlist-group-item active-classactive to/aboutAbout/router-linkrouter-link classlist-group-item active-classactive to/homeHome/router-link/div/divdiv classcol-xs-6div classpaneldiv classpanel-body!--router-view确定视图的位置--router-view/router-view/div/div/div/div/div
/templatescript
import Banner from /components/Banner;
export default {name: App,components: {Banner},
}
/script
style langcss scoped/style
Home.vue
templatedivh2我是Home的内容/h2divul classnav nav-tabslirouter-link classlist-group-item active-classactive to/home/newsNews/router-link/lilirouter-link classlist-group-item active-classactive to/home/messageMessage/router-link/li/ulrouter-view/router-view/div/div/templatescriptexport default {name: Home,// mounted() {// console.log(Home组件挂载完毕, this);// window.homeRoute this.$route;// window.homeRouter this.$router;// },// // beforeDestroy() {// // console.log(Home组件将要被销毁);// // }}/scriptstyle scoped/style 四、路由的query参数
query参数是在组件的$route上的一个东西可以用来接收数据类似的还有params参数
4.1、传参的方式
:to中使用字符串拼接或者模板字符串直接写在要转到的路由路径后面使用?连接拼接:to中使用对象的形式传参推荐使用
Message.vue
ulli v-form in messageList :keym.id!---跳转路由并携带query参数to的字符串写法--!--router-link :to/home/message/detail?id${m.id}title${m.title}{{ m.title }}/router-linknbsp;nbsp;--!---跳转路由并携带query参数to的对象写法--router-link:to{path:/home/message/detail,query:{id: m.id,title: m.title}}{{ m.title }}/router-linknbsp;nbsp;/li/ul
4.2、接收参数
Detail.vue【使用$route.query来接收】
templateulli消息编号:{{ $route.query.id }}/lili消息标题:{{ $route.query.title }}/li/ul/templatescriptexport default {name: Detail,mounted() {console.log(this.$route);}}/scriptstyle scoped/style
4.3、配置三级路由
router/index.js
//该文件专门用于创建整个应用的路由器import VueRouter from vue-router;
import About from /pages/About;
import Home from /pages/Home;
import News from /pages/News;
import Message from /pages/Message;
import * as path from path;
import Detail from /pages/Detail;//创建并默认暴露一个路由器
export default new VueRouter({routes:[{path:/about,component: About},{path:/home,component: Home,children:[ //通过children配置子级路由{path: news, //二级路由不加斜杠component: News},{path: message, //二级路由不加斜杠component: Message,children:[{path: detail, //三级路由component: Detail}],}]}]
});
五、命名路由
作用可以简化路由的跳转。使用先命名使用name属性然后简化后可以直接通过名字跳转比较方便。注意传参时字符串写法没法这么用 router/index.js
//该文件专门用于创建整个应用的路由器import VueRouter from vue-router;
import About from /pages/About;
import Home from /pages/Home;
import News from /pages/News;
import Message from /pages/Message;
import Detail from /pages/Detail;//创建并默认暴露一个路由器
export default new VueRouter({routes:[{name: regard,path:/about,component: About},{path:/home,component: Home,children:[{path: news,component: News},{path: message,component: Message,children:[{name: particulars,path: detail,component: Detail}],}]}]
});
六、路由的params参数
套娃时传数据不只可以用query参数也可以用params参数params也是$route上的一部分
6.1、配置路由声明接收params参数
占位符的名字要和传的params参数的属性名一致否则url会不显示
{path:/home,component :Home,children:[{path:news,component:News},{component:Message,children:[{name:xiangqing,path:detai1/:id/:title//使用占位符声明接收params参数component:Detail }]}]
}
6.2、传递参数
方法一
!--跳转并携带params参数to的字符串写法--
router-link :to/home/message/detail/666/你好跳转/router-link方法二
!--跳转并携带params参数to的对象写法--
router-link:to{name:xiangqing,params:{id:666,title:你好}}跳转/router-link 特别注意:路由携带params参数时若使用to的对象写法则不能使用path配置项必须使用name配置! 6.3、接收参数
ulli消息编号:{{ $route.params.id }}/lili消息标题:{{ $route.params.title }}/li
/ul七、路由的props数据
让路由组件更方便的收到参数 7.1、写法1死数据 值为对象该对象中的所有key-value都会以props的形式传给Detail组件缺点这样值是死的 7.2、写法2props:true props值为布尔值若布尔值为真就会把该路由组件收到的params参数以props的形式传给Detail组件 缺点只能传params参数的query参数不能用这个 7.3、写法3函数 props值为函数该函数返回的对象中每一组key-value都会通过props传给Detail组件这个是最常用的函数会受到参数这个参数就是组件身上的$route可以通过它来获取query或者params里面的东西然后传过去 八、router-link的replace属性
作用控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式分别为push和replacepush是追加历史记录replace是替换当前记录。路由跳转时候默认为push如何开启replace模式router-link replace .......News/router-link 如果用的是默认的push点击进入到下一个路由的时候可以返回到上一个路由如果用的是replace点击进入到下一个路由的时候浏览器左上角不会有返回上一步 九、编程时路由导航
9.1、这是什么
不借助router-link实现路由跳转让路由跳转更加灵活
主要是用$router的两个api pushreplace,来实现路由跳转push是默认带缓存replace是覆盖缓存 9.2、具体编码
//$router的两个API
this.$router.push({name:xiangqing,params :{id :xxxtitle:xxx}
})
this.$router.replace({name:xiangqing,params :{id :xxxtitle:xxx}
})this.$router.forward()//前进
this.$router.back()//后退
this.$router.go()//可前进也可后退 十、缓存路由组件 作用:让不展示的路由组件保持挂载不被销毁。
// 缓存一个用字符串
keep-alive includeNews router-view/router-view
/keep-alive// 缓存多个路由组件用 数组 (使用 v-bind)
keep-alive :include[News, Message]router-view/router-view
/keep-alive缓存的名字是组件名在需要被缓存组件的外侧包裹keep-alive不要去被缓存组件的template里边包 示例 像图中keep-alive includeNews这么写的话切换到Message时News不会销毁
但是从Message切换到NewsMessage会销毁。
十一、两个新的生命周期钩子函数
作用:路由组件所独有的两个钩子用于捕获路由组件的激活状态。具体名字: activated 路由组件被激活时触发,从没有出现在你面前–组件出现在你眼前。 相当于mounteddeactivated 路由组件失活时触发。类似于beforeDestroy除了这些钩子还有个钩子是nextTick是在页面挂载完且数据放到页面上后执行的钩子
templateulli :style{opacity}欢迎学习vue/lilinews001 input typetext//lilinews002 input typetext//lilinews003 input typetext//li/ul
/templatescript
export default {name: News,data(){return {opacity: 1}},// mounted() {// this.timer setInterval(() {// console.log()// this.opacity - 0.01;// if(this.opacity 0) this.opacity 1;// },16);// },//// beforeDestroy() {// console.log(News组件将要被销毁);// clearInterval(this.timer);// },//激活(路由组件独有的两个钩子)activated() {console.log(News组件被激活);this.timer setInterval(() {console.log()this.opacity - 0.01;if(this.opacity 0) this.opacity 1;},16);},//失活deactivated() {console.log(News组件失活了);clearInterval(this.timer);}
}
/scriptstyle scoped/style
十二、路由守卫
作用对路由进行权限控制(想让看哪个不想让看哪个) 分类全局守卫、独享守卫、组件内守卫 12.1、路由元信息
配置路由规则时专门提供的一个容器meta用来存放我们自定义的一些属性 12.2、全局路由守卫 12.2.1、全局前置守卫
初始化时执行、每次路由切换前执行
使用下面的api有三个参数to到哪里去from从哪里来next下一步放行
router.beforeEach((to,from,next){ })其中router是自定义的路由规则的名字const router new VueRouter({})
要设置只有本地存储中school为hznu的可以查看新闻和消息那就要在前置路由守卫中设置如果符合条件才能放行。
//初始化时或每一次路由切换之前都会调用一个函数
router.beforeEach((to, from, next) {console.log(前置路由守卫,外边的保安, to, from);//to是往哪去的对象from的从哪来的对象都包括name和path// if (to.name xinwen || to.name xiaoxi) {if (to.meta.isAuth) { //判断是否需要鉴权if (localStorage.getItem(school) hznu) {next(); //放行} else {alert(学校名不对无权限查看);}} else {next(); //放行}
});12.2.2、全局后置守卫 12.3、独享路由守卫 12.4、组件内路由守卫 12.4.1、进入组件时 12.4.2、离开组件时
12.4.3、以about为例 12.5、组件从前置路由守卫到失活的执行流程 文章部分内容参考
GitHub - Panyue-genkiyo/vue-advance: 利用vue-cli脚手架学习vue核心知识(示例小项目)
Vue2十三路由的使用及注意点、嵌套路由、路由的query和params参数、props配置_vue2 路由加query-CSDN博客
