北京模板网站开发,网站栏目规划,上海代理记账公司排名,樱花12e561. router 相关理解
1.1 vue-router 的理解
vue 的一个插件库#xff0c;专门用来实现 SPA 应用
1.2 对 SPA 应用的理解
单页 Web 应用#xff08;single page web application#xff0c;SPA#xff09;。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页…1. router 相关理解
1.1 vue-router 的理解
vue 的一个插件库专门用来实现 SPA 应用
1.2 对 SPA 应用的理解
单页 Web 应用single page web applicationSPA。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面只会做页面的局部更新。数据需要通过 ajax 请求获取。
1.3 路由的理解 什么是路由? 一个路由就是一组映射关系key - valuekey 为路径, value 可能是 function 或 component 路由分类
后端路由 理解value 是 function, 用于处理客户端提交的请求。工作过程服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。 前端路由 理解value 是 component用于展示页面内容。工作过程当浏览器的路径改变时, 对应的组件就会显示。
2. 路由的基本使用
安装vue-router命令npm i vue-router应用插件Vue.use(VueRouter)编写router配置项:
//引入VueRouter
import VueRouter from vue-router
//引入Luyou 组件
import About from ../components/About
import Home from ../components/Home//创建router实例对象去管理一组一组的路由规则
const router new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home}]
})//暴露router
export default router实现切换active-class可配置高亮样式 router-link active-classactive to/aboutAbout/router-link指定展示位置 router-view/router-view
相关 API
this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)this.$router.back(): 请求(返回)上一个记录路由this.$router.go(-1): 请求(返回)上一个记录路由this.$router.go(1): 请求下一个记录路由
总结: 编写使用路由的 3 步
定义路由组件注册路由使用路由
3. 几个注意点
路由组件通常存放在pages文件夹一般组件通常存放在components文件夹。通过切换“隐藏”了的路由组件默认是被销毁掉的需要的时候再去挂载。每个组件都有自己的$route属性里面存储着自己的路由信息。整个应用只有一个router可以通过组件的$router属性获取到。
4. 多级路由
配置路由规则使用children配置项
routes:[{path:/about,component:About,},{path:/home,component:Home,children:[ //通过children配置子级路由{path:news, //此处一定不要写/newscomponent:News},{path:message,//此处一定不要写/messagecomponent:Message}]}
]跳转要写完整路径 router-link to/home/newsNews/router-link
5. 路由的 query 参数
传递参数
!-- 跳转并携带query参数to的字符串写法 --
router-link :to/home/message/detail?id666title你好跳转/router-link!-- 跳转并携带query参数to的对象写法 --
router-link :to{path:/home/message/detail,query:{id:666,title:你好}}
跳转/router-link接收参数
$route.query.id
$route.query.title6. 命名路由
作用可以简化路由的跳转。
6.1 如何使用命名路由
给路由命名
{path:/demo,component:Demo,children:[{path:test,component:Test,children:[{name:hello //给路由命名path:welcome,component:Hello,}]}]
}简化跳转
!--简化前需要写完整的路径 --
router-link to/demo/test/welcome跳转/router-link!--简化后直接通过名字跳转 --
router-link :to{name:hello}跳转/router-link!--简化写法配合传递参数 --
router-link :to{name:hello,query:{id:666,title:你好}}
跳转/router-link7. 路由的 params 参数
配置路由声明接收 params 参数
{path:/home,component:Home,children:[{path:news,component:News},{component:Message,children:[{name:xiangqing,path:detail/:id/:title, //使用占位符声明接收params参数component:Detail}]}]
}传递参数
!-- 跳转并携带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配置 接收参数
$route.params.id
$route.params.title8. 路由的 props 配置
作用让路由组件更方便的收到参数
{name:xiangqing,path:detail/:id,component:Detail,//第一种写法props值为对象该对象中所有的key-value的组合最终都会通过props传给Detail组件// props:{a:900}//第二种写法props值为布尔值布尔值为true则把路由收到的所有params参数通过props传给Detail组件// props:true//第三种写法props值为函数该函数返回的对象中每一组key-value都会通过props传给Detail组件props(route){return {id:route.query.id,title:route.query.title}}
}9. router-link的 replace 属性
作用控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式分别为push和replacepush是追加历史记录replace是替换当前记录。路由跳转时候默认为push如何开启replace模式router-link replace .......News/router-linkpush 类似与数据结构里面的栈结构先进后出replace 是直接替换
10. 编程式路由导航
作用不借助router-link 实现路由跳转让路由跳转更加灵活具体编码
//$router的两个API
this.$router.push({name:xiangqing,params:{id:xxx,title:xxx}
})this.$router.replace({name:xiangqing,params:{id:xxx,title:xxx}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //可前进也可后退11. 缓存路由组件
作用让不展示的路由组件保持挂载不被销毁。具体编码
keep-alive includeNews router-view/router-view
/keep-alive12. 两个新的生命周期钩子
作用路由组件所独有的两个钩子用于捕获路由组件的激活状态。具体名字 activated路由组件被激活时触发。deactivated路由组件失活时触发。
nextTick 是第11个钩子
13. 路由守卫
作用对路由进行权限控制分类全局守卫、独享守卫、组件内守卫
13.1 全局守卫
//全局前置守卫初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next){console.log(beforeEach,to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem(school) atguigu){ //权限控制的具体规则next() //放行}else{alert(暂无权限查看)// next({name:guanyu})}}else{next() //放行}
})//全局后置守卫初始化时执行、每次路由切换后执行
router.afterEach((to,from){console.log(afterEach,to,from)if(to.meta.title){ document.title to.meta.title //修改网页的title}else{document.title vue_test}
})13.2 独享守卫
beforeEnter(to,from,next){console.log(beforeEnter,to,from)if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制if(localStorage.getItem(school) atguigu){next()}else{alert(暂无权限查看)// next({name:guanyu})}}else{next()}
}12.3 组件内守卫
//进入守卫通过路由规则进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫通过路由规则离开该组件时被调用
beforeRouteLeave (to, from, next) {
}13. 路由器的两种工作模式
对于一个url来说什么是hash值—— #及其后面的内容就是hash值。hash值不会包含在 HTTP 请求中即hash值不会带给服务器。
13.1 hash模式
地址中永远带着#号不美观 。若以后将地址通过第三方手机app分享若app校验严格则地址会被标记为不合法。兼容性较好。
13.2 history模式
地址干净美观 。兼容性和hash模式相比略差。应用部署上线时需要后端人员支持解决刷新页面服务端404的问题。
14. 路由的使用 案例
效果
14.1 路由的基本使用 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router:router
})
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}]
})
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!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptexport default {name:App,}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About}
/scriptHome.vue
templateh2我是Home的内容/h2
/templatescriptexport default {name:Home}
/script14.2 多级路由 案例
效果 结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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,}]}]
})
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */}
/scriptHome.vue
templatedivh2Home组件内容/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,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivullia href/message1message001/anbsp;nbsp;/lilia href/message2message002/anbsp;nbsp;/lilia href/message/3message003/anbsp;nbsp;/li/ul/div
/templatescriptexport default {name:Message}
/scriptNews.vue
templateullinews001/lilinews002/lilinews003/li/ul
/templatescriptexport default {name:News}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div
/templatescriptexport default {name:Banner}
/script14.3 路由的 query 参数 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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:[{path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News,},{path:message,component:Message,children:[{path:detail,component:Detail,}]}]}]
})
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */}
/scriptHome.vue
templatedivh2Home组件内容/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,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli 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-link/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},}
/scriptNews.vue
templateullinews001/lilinews002/lilinews003/li/ul
/templatescriptexport default {name:News}
/scriptDetail.vue
templateulli消息编号{{$route.query.id}}/lili消息标题{{$route.query.title}}/li/ul
/templatescriptexport default {name:Detail,mounted() {console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div
/templatescriptexport default {name:Banner}
/script14.4 使用命名路由 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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:guanyu,path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News,},{path:message,component:Message,children:[{name:xiangqing,path:detail,component:Detail,}]}]}]
})
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */}
/scriptHome.vue
templatedivh2Home组件内容/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,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli 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{name:xiangqing,query:{id:m.id,title:m.title}}{{m.title}}/router-link/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},}
/scriptNews.vue
templateullinews001/lilinews002/lilinews003/li/ul
/templatescriptexport default {name:News}
/scriptDetail.vue
templateulli消息编号{{$route.query.id}}/lili消息标题{{$route.query.title}}/li/ul
/templatescriptexport default {name:Detail,mounted() {console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div
/templatescriptexport default {name:Banner}
/script14.5 路由的 params 参数 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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:guanyu,path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News,},{path:message,component:Message,children:[{name:xiangqing,path:detail/:id/:title,component:Detail,}]}]}]
})
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */}
/scriptHome.vue
templatedivh2Home组件内容/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,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,params:{id:m.id,title:m.title}}{{m.title}}/router-link/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},}
/scriptNews.vue
templateullinews001/lilinews002/lilinews003/li/ul
/templatescriptexport default {name:News}
/scriptDetail.vue
templateulli消息编号{{$route.params.id}}/lili消息标题{{$route.params.title}}/li/ul
/templatescriptexport default {name:Detail,mounted() {// console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div
/templatescriptexport default {name:Banner}
/script14.6 路由的 props 配置 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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:guanyu,path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News,},{path:message,component:Message,children:[{name:xiangqing,path:detail,component:Detail,//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */}
/scriptHome.vue
templatedivh2Home组件内容/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,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,query:{id:m.id,title:m.title}}{{m.title}}/router-link/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},}
/scriptNews.vue
templateullinews001/lilinews002/lilinews003/li/ul
/templatescriptexport default {name:News}
/scriptDetail.vue
templateulli消息编号{{id}}/lili消息标题{{title}}/li/ul
/templatescriptexport default {name:Detail,props:[id,title],computed: {// id(){// return this.$route.query.id// },// title(){// return this.$route.query.title// },},mounted() {// console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div
/templatescriptexport default {name:Banner}
/script14.7 router-link的 replace 属性的 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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:guanyu,path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News,},{path:message,component:Message,children:[{name:xiangqing,path:detail,component:Detail,//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */}
/scriptHome.vue
templatedivh2Home组件内容/h2divul classnav nav-tabslirouter-link replace classlist-group-item active-classactive to/home/newsNews/router-link/lilirouter-link replace classlist-group-item active-classactive to/home/messageMessage/router-link/li/ulrouter-view/router-view/div/div
/templatescriptexport default {name:Home,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,query:{id:m.id,title:m.title}}{{m.title}}/router-link/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},}
/scriptNews.vue
templateullinews001/lilinews002/lilinews003/li/ul
/templatescriptexport default {name:News}
/scriptDetail.vue
templateulli消息编号{{id}}/lili消息标题{{title}}/li/ul
/templatescriptexport default {name:Detail,props:[id,title],computed: {// id(){// return this.$route.query.id// },// title(){// return this.$route.query.title// },},mounted() {// console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div
/templatescriptexport default {name:Banner}
/script14.8 编程式路由导航 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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:guanyu,path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News,},{path:message,component:Message,children:[{name:xiangqing,path:detail,component:Detail,//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */}
/scriptHome.vue
templatedivh2Home组件内容/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,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,query:{id:m.id,title:m.title}}{{m.title}}/router-linkbutton clickpushShow(m)push查看/buttonbutton clickreplaceShow(m)replace查看/button/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},methods: {pushShow(m){this.$router.push({name:xiangqing,query:{id:m.id,title:m.title}})},replaceShow(m){this.$router.replace({name:xiangqing,query:{id:m.id,title:m.title}})}},}
/scriptNews.vue
templateullinews001/lilinews002/lilinews003/li/ul
/templatescriptexport default {name:News}
/scriptDetail.vue
templateulli消息编号{{id}}/lili消息标题{{title}}/li/ul
/templatescriptexport default {name:Detail,props:[id,title],computed: {// id(){// return this.$route.query.id// },// title(){// return this.$route.query.title// },},mounted() {// console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2button clickback后退/buttonbutton clickforward前进/buttonbutton clicktest测试一下go/button/div/div
/templatescriptexport default {name:Banner,methods: {back(){this.$router.back()// console.log(this.$router)},forward(){this.$router.forward()},test(){this.$router.go(3)}},}
/script14.9 缓存路由组件 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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:guanyu,path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News,},{path:message,component:Message,children:[{name:xiangqing,path:detail,component:Detail,//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */}
/scriptHome.vue
templatedivh2Home组件内容/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/ul!-- 缓存多个路由组件 --!-- keep-alive :include[News,Message] --!-- 缓存一个路由组件 --keep-alive includeNewsrouter-view/router-view/keep-alive/div/div
/templatescriptexport default {name:Home,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,query:{id:m.id,title:m.title}}{{m.title}}/router-linkbutton clickpushShow(m)push查看/buttonbutton clickreplaceShow(m)replace查看/button/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},methods: {pushShow(m){this.$router.push({name:xiangqing,query:{id:m.id,title:m.title}})},replaceShow(m){this.$router.replace({name:xiangqing,query:{id:m.id,title:m.title}})}},beforeDestroy() {console.log(Message组件即将被销毁了)},}
/scriptNews.vue
templateullinews001 input typetext/lilinews002 input typetext/lilinews003 input typetext/li/ul
/templatescriptexport default {name:News,beforeDestroy() {console.log(News组件即将被销毁了)},}
/scriptDetail.vue
templateulli消息编号{{id}}/lili消息标题{{title}}/li/ul
/templatescriptexport default {name:Detail,props:[id,title],computed: {// id(){// return this.$route.query.id// },// title(){// return this.$route.query.title// },},mounted() {// console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2button clickback后退/buttonbutton clickforward前进/buttonbutton clicktest测试一下go/button/div/div
/templatescriptexport default {name:Banner,methods: {back(){this.$router.back()// console.log(this.$router)},forward(){this.$router.forward()},test(){this.$router.go(3)}},}
/script14.10 两个新的生命周期钩子 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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:guanyu,path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News,},{path:message,component:Message,children:[{name:xiangqing,path:detail,component:Detail,//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */}
/scriptHome.vue
templatedivh2Home组件内容/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/ulkeep-alive includeNewsrouter-view/router-view/keep-alive/div/div
/templatescriptexport default {name:Home,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,query:{id:m.id,title:m.title}}{{m.title}}/router-linkbutton clickpushShow(m)push查看/buttonbutton clickreplaceShow(m)replace查看/button/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},methods: {pushShow(m){this.$router.push({name:xiangqing,query:{id:m.id,title:m.title}})},replaceShow(m){this.$router.replace({name:xiangqing,query:{id:m.id,title:m.title}})}},beforeDestroy() {// console.log(Message组件即将被销毁了)},}
/scriptNews.vue
templateulli :style{opacity}欢迎学习Vue/lilinews001 input typetext/lilinews002 input typetext/lilinews003 input typetext/li/ul
/templatescriptexport default {name:News,data() {return {opacity:1}},/* beforeDestroy() {console.log(News组件即将被销毁了)clearInterval(this.timer)}, *//* mounted(){this.timer setInterval(() {console.log()this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)}, */activated() {console.log(News组件被激活了)this.timer setInterval(() {console.log()this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)},deactivated() {console.log(News组件失活了)clearInterval(this.timer)},}
/scriptDetail.vue
templateulli消息编号{{id}}/lili消息标题{{title}}/li/ul
/templatescriptexport default {name:Detail,props:[id,title],computed: {// id(){// return this.$route.query.id// },// title(){// return this.$route.query.title// },},mounted() {// console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2button clickback后退/buttonbutton clickforward前进/buttonbutton clicktest测试一下go/button/div/div
/templatescriptexport default {name:Banner,methods: {back(){this.$router.back()// console.log(this.$router)},forward(){this.$router.forward()},test(){this.$router.go(3)}},}
/script14.11 全局守卫 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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//创建并暴露一个路由器
const router new VueRouter({routes:[{name:guanyu,path:/about,component:About,meta:{title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{isAuth:true,title:新闻}},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true,title:消息},children:[{name:xiangqing,path:detail,component:Detail,meta:{isAuth:true,title:详情},//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next){console.log(前置路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}
})//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from){console.log(后置路由守卫,to,from)document.title to.meta.title || 硅谷系统
})export default router
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */mounted() {console.log(%%%,this.$route)},}
/scriptHome.vue
templatedivh2Home组件内容/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/ulkeep-alive includeNewsrouter-view/router-view/keep-alive/div/div
/templatescriptexport default {name:Home,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,query:{id:m.id,title:m.title}}{{m.title}}/router-linkbutton clickpushShow(m)push查看/buttonbutton clickreplaceShow(m)replace查看/button/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},methods: {pushShow(m){this.$router.push({name:xiangqing,query:{id:m.id,title:m.title}})},replaceShow(m){this.$router.replace({name:xiangqing,query:{id:m.id,title:m.title}})}},beforeDestroy() {// console.log(Message组件即将被销毁了)},}
/scriptNews.vue
templateulli :style{opacity}欢迎学习Vue/lilinews001 input typetext/lilinews002 input typetext/lilinews003 input typetext/li/ul
/templatescriptexport default {name:News,data() {return {opacity:1}},/* beforeDestroy() {console.log(News组件即将被销毁了)clearInterval(this.timer)}, *//* mounted(){this.timer setInterval(() {console.log()this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)}, */activated() {console.log(News组件被激活了)this.timer setInterval(() {console.log()this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)},deactivated() {console.log(News组件失活了)clearInterval(this.timer)},}
/scriptDetail.vue
templateulli消息编号{{id}}/lili消息标题{{title}}/li/ul
/templatescriptexport default {name:Detail,props:[id,title],computed: {// id(){// return this.$route.query.id// },// title(){// return this.$route.query.title// },},mounted() {// console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2button clickback后退/buttonbutton clickforward前进/buttonbutton clicktest测试一下go/button/div/div
/templatescriptexport default {name:Banner,methods: {back(){this.$router.back()// console.log(this.$router)},forward(){this.$router.forward()},test(){this.$router.go(3)}},}
/script14.12 独享守卫 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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//创建并暴露一个路由器
const router new VueRouter({routes:[{name:guanyu,path:/about,component:About,meta:{title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{isAuth:true,title:新闻},beforeEnter: (to, from, next) {console.log(独享路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}}},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true,title:消息},children:[{name:xiangqing,path:detail,component:Detail,meta:{isAuth:true,title:详情},//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
/* router.beforeEach((to,from,next){console.log(前置路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}
}) *///全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from){console.log(后置路由守卫,to,from)document.title to.meta.title || 硅谷系统
})export default router
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */mounted() {console.log(%%%,this.$route)},}
/scriptHome.vue
templatedivh2Home组件内容/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/ulkeep-alive includeNewsrouter-view/router-view/keep-alive/div/div
/templatescriptexport default {name:Home,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,query:{id:m.id,title:m.title}}{{m.title}}/router-linkbutton clickpushShow(m)push查看/buttonbutton clickreplaceShow(m)replace查看/button/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},methods: {pushShow(m){this.$router.push({name:xiangqing,query:{id:m.id,title:m.title}})},replaceShow(m){this.$router.replace({name:xiangqing,query:{id:m.id,title:m.title}})}},beforeDestroy() {// console.log(Message组件即将被销毁了)},}
/scriptNews.vue
templateulli :style{opacity}欢迎学习Vue/lilinews001 input typetext/lilinews002 input typetext/lilinews003 input typetext/li/ul
/templatescriptexport default {name:News,data() {return {opacity:1}},/* beforeDestroy() {console.log(News组件即将被销毁了)clearInterval(this.timer)}, *//* mounted(){this.timer setInterval(() {console.log()this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)}, */activated() {console.log(News组件被激活了)this.timer setInterval(() {console.log()this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)},deactivated() {console.log(News组件失活了)clearInterval(this.timer)},}
/scriptDetail.vue
templateulli消息编号{{id}}/lili消息标题{{title}}/li/ul
/templatescriptexport default {name:Detail,props:[id,title],computed: {// id(){// return this.$route.query.id// },// title(){// return this.$route.query.title// },},mounted() {// console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2button clickback后退/buttonbutton clickforward前进/buttonbutton clicktest测试一下go/button/div/div
/templatescriptexport default {name:Banner,methods: {back(){this.$router.back()// console.log(this.$router)},forward(){this.$router.forward()},test(){this.$router.go(3)}},}
/script14.13 组件内守卫 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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//创建并暴露一个路由器
const router new VueRouter({routes:[{name:guanyu,path:/about,component:About,meta:{isAuth:true,title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{isAuth:true,title:新闻},/* beforeEnter: (to, from, next) {console.log(前置路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}} */},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true,title:消息},children:[{name:xiangqing,path:detail,component:Detail,meta:{isAuth:true,title:详情},//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
/* router.beforeEach((to,from,next){console.log(前置路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}
}) *///全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from){console.log(后置路由守卫,to,from)document.title to.meta.title || 硅谷系统
})export default router
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */mounted() {// console.log(%%%,this.$route)},//通过路由规则进入该组件时被调用beforeRouteEnter (to, from, next) {console.log(About--beforeRouteEnter,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}},//通过路由规则离开该组件时被调用beforeRouteLeave (to, from, next) {console.log(About--beforeRouteLeave,to,from)next()}}
/scriptHome.vue
templatedivh2Home组件内容/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/ulkeep-alive includeNewsrouter-view/router-view/keep-alive/div/div
/templatescriptexport default {name:Home,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,query:{id:m.id,title:m.title}}{{m.title}}/router-linkbutton clickpushShow(m)push查看/buttonbutton clickreplaceShow(m)replace查看/button/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},methods: {pushShow(m){this.$router.push({name:xiangqing,query:{id:m.id,title:m.title}})},replaceShow(m){this.$router.replace({name:xiangqing,query:{id:m.id,title:m.title}})}},beforeDestroy() {// console.log(Message组件即将被销毁了)},}
/scriptNews.vue
templateulli :style{opacity}欢迎学习Vue/lilinews001 input typetext/lilinews002 input typetext/lilinews003 input typetext/li/ul
/templatescriptexport default {name:News,data() {return {opacity:1}},/* beforeDestroy() {console.log(News组件即将被销毁了)clearInterval(this.timer)}, *//* mounted(){this.timer setInterval(() {console.log()this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)}, */activated() {console.log(News组件被激活了)this.timer setInterval(() {console.log()this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)},deactivated() {console.log(News组件失活了)clearInterval(this.timer)},}
/scriptDetail.vue
templateulli消息编号{{id}}/lili消息标题{{title}}/li/ul
/templatescriptexport default {name:Detail,props:[id,title],computed: {// id(){// return this.$route.query.id// },// title(){// return this.$route.query.title// },},mounted() {// console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2button clickback后退/buttonbutton clickforward前进/buttonbutton clicktest测试一下go/button/div/div
/templatescriptexport default {name:Banner,methods: {back(){this.$router.back()// console.log(this.$router)},forward(){this.$router.forward()},test(){this.$router.go(3)}},}
/script14.13 路由器的两种工作模式 案例
结构
main.js
//引入Vue
import Vue from vue
//引入App
import App from ./App.vue
//引入VueRouter
import VueRouter from vue-router
//引入路由器
import router from ./router//关闭Vue的生产提示
Vue.config.productionTip false
//应用插件
Vue.use(VueRouter)//创建vm
new Vue({el:#app,render: h h(App),router: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//创建并暴露一个路由器
const router new VueRouter({mode:history,routes:[{name:guanyu,path:/about,component:About,meta:{isAuth:true,title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{isAuth:true,title:新闻},/* beforeEnter: (to, from, next) {console.log(前置路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}} */},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true,title:消息},children:[{name:xiangqing,path:detail,component:Detail,meta:{isAuth:true,title:详情},//props的第一种写法值为对象该对象中的所有key-value都会以props的形式传给Detail组件。// props:{a:1,b:hello}//props的第二种写法值为布尔值若布尔值为真就会把该路由组件收到的所有params参数以props的形式传给Detail组件。// props:true//props的第三种写法值为函数props($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}]
})//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
/* router.beforeEach((to,from,next){console.log(前置路由守卫,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}
}) *///全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from){console.log(后置路由守卫,to,from)document.title to.meta.title || 硅谷系统
})export default router
App.vue
templatedivdiv classrowBanner//divdiv classrowdiv classcol-xs-2 col-xs-offset-2div classlist-group!-- 原始html中我们使用a标签实现页面的跳转 --!-- a classlist-group-item active href./about.htmlAbout/a --!-- a classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --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/div/div/div/div/div
/templatescriptimport Banner from ./components/Bannerexport default {name:App,components:{Banner}}
/script
About.vue
templateh2我是About的内容/h2
/templatescriptexport default {name:About,/* beforeDestroy() {console.log(About组件即将被销毁了)},*//* mounted() {console.log(About组件挂载完毕了,this)window.aboutRoute this.$routewindow.aboutRouter this.$router}, */mounted() {// console.log(%%%,this.$route)},//通过路由规则进入该组件时被调用beforeRouteEnter (to, from, next) {console.log(About--beforeRouteEnter,to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}},//通过路由规则离开该组件时被调用beforeRouteLeave (to, from, next) {console.log(About--beforeRouteLeave,to,from)next()}}
/scriptHome.vue
templatedivh2Home组件内容/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/ulkeep-alive includeNewsrouter-view/router-view/keep-alive/div/div
/templatescriptexport default {name:Home,/* beforeDestroy() {console.log(Home组件即将被销毁了)}, *//* mounted() {console.log(Home组件挂载完毕了,this)window.homeRoute this.$routewindow.homeRouter this.$router}, */}
/scriptMessage.vue
templatedivulli v-form in messageList :keym.id!-- 跳转路由并携带params参数to的字符串写法 --!-- router-link :to/home/message/detail/${m.id}/${m.title}{{m.title}}/router-linknbsp;nbsp; --!-- 跳转路由并携带params参数to的对象写法 --router-link :to{name:xiangqing,query:{id:m.id,title:m.title}}{{m.title}}/router-linkbutton clickpushShow(m)push查看/buttonbutton clickreplaceShow(m)replace查看/button/li/ulhrrouter-view/router-view/div
/templatescriptexport default {name:Message,data() {return {messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003}]}},methods: {pushShow(m){this.$router.push({name:xiangqing,query:{id:m.id,title:m.title}})},replaceShow(m){this.$router.replace({name:xiangqing,query:{id:m.id,title:m.title}})}},beforeDestroy() {// console.log(Message组件即将被销毁了)},}
/scriptNews.vue
templateulli :style{opacity}欢迎学习Vue/lilinews001 input typetext/lilinews002 input typetext/lilinews003 input typetext/li/ul
/templatescriptexport default {name:News,data() {return {opacity:1}},/* beforeDestroy() {console.log(News组件即将被销毁了)clearInterval(this.timer)}, *//* mounted(){this.timer setInterval(() {console.log()this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)}, */activated() {console.log(News组件被激活了)this.timer setInterval(() {console.log()this.opacity - 0.01if(this.opacity 0) this.opacity 1},16)},deactivated() {console.log(News组件失活了)clearInterval(this.timer)},}
/scriptDetail.vue
templateulli消息编号{{id}}/lili消息标题{{title}}/li/ul
/templatescriptexport default {name:Detail,props:[id,title],computed: {// id(){// return this.$route.query.id// },// title(){// return this.$route.query.title// },},mounted() {// console.log(this.$route)},}
/scriptBanner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2button clickback后退/buttonbutton clickforward前进/buttonbutton clicktest测试一下go/button/div/div
/templatescriptexport default {name:Banner,methods: {back(){this.$router.back()// console.log(this.$router)},forward(){this.$router.forward()},test(){this.$router.go(3)}},}
/script
