福州定制网站开发制作,企业网站建设需要多钱,华为公司网站建设方案模板下载,中山市seo推广点击软件什么是路由? 一个路由就是一组映射关系#xff08;key - value#xff09;key 为路径#xff0c;value 可能是 function 或 component 2、安装\引入\基础使用 只有vue-router3#xff0c;才能应用于vue2#xff1b;vue-router4可以应用于vue3中
这里我们安装vue-router3… 什么是路由? 一个路由就是一组映射关系key - valuekey 为路径value 可能是 function 或 component 2、安装\引入\基础使用 只有vue-router3才能应用于vue2vue-router4可以应用于vue3中
这里我们安装vue-router3npm i vue-router3
引入vue-router在入口js中引入import VueRouter from vue-router
vue.use(VueRouter)
多级路由
即是由多个路由相互嵌套而形成的 Banner作为title直接在App.vue中实现
然后是About和Home作为路由组件在App.vue中。
message和news继而继续嵌套在home中
main.js
import Vue from vue
import App from ./App.vue//引入VueRouter
import VueRouter from vue-router//引入路由器
import router from ./routerVue.config.productionTip false//应用插件
Vue.use(VueRouter)new Vue({el:#app,render: h h(App),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/aa classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --router-link classlist-group-item active-classactive to/about About/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
/templatescript
import Banner from ./components/Banner.vueexport default {name:App,components:{Banner,}}
/scriptrouter/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/Messageconst router new VueRouter({routes:[{path:/about,component:About},{path:/home,component:Home,children:[{path:news,component:News,},{path:message,component:Message,}]}]
})export default router
Banner.vue
templatediv classcol-xs-offset-2 col-xs-8div classpage-headerh2Vue Router Demo/h2/div/div
/templatescript
export default {name:Banner
}
/scriptstyle/style
About.vue
templateh2我是About的内容/h2
/templatescript
export default {name:About}
/scriptHome
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/ululrouter-view/router-view/ul/div/div/templatescriptexport default {name:Home}
/scriptmessage
templatedivdivullia href/message1message001/anbsp;nbsp;/lilia href/message2message002/anbsp;nbsp;/lilia href/message/3message003/anbsp;nbsp;/li/ul/div/div
/templatescript
export default {name:Mesage,
}
/scriptstyle/style
news
templateullinews001/lilinews002/lilinews003/li/ul
/templatescript
export default {name:News,
}
/scriptstyle/style query的传参
若是有很多的嵌套的情况下一直如上嵌套是不现实的所以可以通过传参的方法将需要传递的参数直接带到下一个页面中
下例即是在message下继续嵌套 index.js引入继续嵌套的detail
//该文件专门应用于创建整个应用的路由器
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/Detailconst router 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,}]}]}]
})export default router
message传递query参数
templatedivdivulli 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/div
/templatescript
export default {name:Mesage,data(){return{messageList:[{id:001,title:消息001},{id:002,title:消息002},{id:003,title:消息003},]}}
}
/scriptstyle/style
detail接收参数
templateulli消息编号:{{$route.query.id}}/lili消息标题:{{$route.query.title}}/li/ul
/templatescript
export default {name:Detail,mounted(){console.log(this.$route)}}
/scriptstyle/style
replace
类似于无痕浏览即当前的router-link标签若加上了这个则当前对该标签的操作是不可追回的
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/aa classlist-group-item href./home.htmlHome/a --!-- Vue中借助router-link标签实现路由的切换 --router-link replace classlist-group-item active-classactive to/about About/router-linkrouter-link replace 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
/templatescript
import Banner from ./components/Banner.vueexport default {name:App,components:{Banner,}}
/scriptactivated和deactivated
这是路由组件中两个独有的生命周期钩子用于捕获路由组件的生命周期状态
具体使用 activated路由组件被激活时触发deactivated路由组件失活时触发
News
templateullinews001 input typetext/lilinews002 input typetext/lilinews003 input typetext/li/ul
/templatescript
export default {name:News,data(){return{opacity:1}},activated(){console.log(News组件被激活了)},deactivated(){console.log(News组件失活了)}
}
/script 路由守卫
例子在淘宝中若是不经过登录则是无法跳转到个人中心页面即使点击个人中心也是不能的这就是路由守卫
前置首位 index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from vue-router;
//引入组件
import Home from ../pages/Home
import About from ../pages/About
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},{name:zhuye,path:/home,component:Home,children:[{name:xinwen,path:news,component:News,meta:{isAuth:true}},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true},children:[{name:xiangqing,path:detail,component:Detail,props($route){return {id:$route.query.id,title:$route.query.title,}}}]}]}]
})//全局前置路由守卫--初始化时被调用每次路由切换之前被调用
router.beforeEach((to,from,next){console.log(to,from)if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school)atguigu){next()}else{alert(学校名不对无权限查看)}}else{next()}
})export default router全局守卫
对路由组件权限的控制
index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from vue-router;
//引入组件
import Home from ../pages/Home
import About from ../pages/About
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($route){return {id:$route.query.id,title:$route.query.title,}}}]}]}]
})//全局前置路由守卫--初始化时被调用每次路由切换之前被调用
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.titleto.meta.title
})export default router独享路由守卫针对于特别需求坐单独的路由守卫 index.js
//该文件专门用于创建整个应用的路由器
import VueRouter from vue-router;
//引入组件
import Home from ../pages/Home
import About from ../pages/About
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($route){return {id:$route.query.id,title:$route.query.title,}}}]}]}]
})// //全局前置路由守卫--初始化时被调用每次路由切换之前被调用
// 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.titleto.meta.title
// })export default router
