vue路由1、vue |
您所在的位置：网站首页 › 路由钩子函数的参数 › vue路由1、vue |
vue路由1、vue
|
加粗样式 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。 前端路由：key是路径，value是组件。 1、vue-router 的理解vue 的一个插件库，专门用来实现 SPA 应用 单页 Web 应用（single page web application，SPA）。 整个应用只有一个完整的页面。 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。 数据需要通过 ajax 请求 整个应用只有一个完整的页面。编写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 routerVue中借助router-link标签实现路由的切换 （active-class可配置高亮样式） About指定组件的呈现位置 //main.js import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router'; import router from './route/index.js' Vue.use(VueRouter); new Vue({ el:"#app", render:h=>h(App), router })注意 路由组件通常存放在pages 文件夹，一般组件通常存放在components 文件夹。 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。 每个组件都有自己的$route 属性，里面存储着自己的路由信息。 整个应用只有一个router，可以通过组件的$router 属性获取到。 //About.vue 我是About的内容 export default { name:'About', beforeDestroy(){ console.log("about即将销毁") }, mounted(){ console.log("about挂载完毕"); window.aboutroute=this.$route; window.aboutrouter=this.$router; } } //Home.vue 我是Home的内容 export default { name:'Home', beforeDestroy(){ console.log("home即将销毁") }, mounted(){ console.log("home挂载完毕") window.homeroute=this.$route; window.homerouter=this.$router; } }点击about再点击home  vue路由1、vue-router 的理解2、嵌套路由（多级路由）3、query参数4、命名路由5、params参数6、路由的props配置7、router-link的replace属性8、编程式路由导航9、缓存路由组件10、两个新的生命函数钩子11、路由守卫12、路由器的两种工作模式13、路由懒加载 2、嵌套路由（多级路由） 配置路由规则，使用children配置项： routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path:'news', //此处一定不要写：/news component:News }, { path:'message',//此处一定不要写：/message component:Message } ] } ]跳转（要写完整路径）： News //Home.vue 我是Home的内容 News Message export default { name:'Home', // beforeDestroy(){ // console.log("home即将销毁") // }, // mounted(){ // console.log("home挂载完毕") // window.homeroute=this.$route; // window.homerouter=this.$router; // } } 3、query参数传递参数 跳转 跳转接收参数： $route.query.id $route.query.title //Detail.vue 消息编号：{{$route.query.id}} 消息标题：{{$route.query.title}} export default { name:'Detail', mounted() { console.log(this.$route) }, } //Message.vue {{m.title}} export default { name:'Message', data() { return { messageList:[ {id:'001',title:'消息001'}, {id:'002',title:'消息002'}, {id:'003',title:'消息003'} ] } }, } 4、命名路由1、作用：可以简化路由的跳转。 给路由命名： { path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'welcome', component:Hello, } ] } ] } 跳转 跳转 跳转 5、params参数配置路由，声明接收params参数 { path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 component:Detail } ] } ] }传递参数 跳转 跳转接收参数 $route.params.id $route.params.title注意： 路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！ //Message.vue {{m.title}} export default { name:'Message', data() { return { messageList:[ {id:'001',title:'消息001'}, {id:'002',title:'消息002'}, {id:'003',title:'消息003'} ] } }, } //Detail.vue 消息编号：{{$route.params.id}} 消息标题：{{$route.params.title}} export default { name:'Detail', mounted() { // console.log(this.$route) }, } 6、路由的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 } } } //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' } } } ] } ] } ] }) //Message.vue {{m.title}} export default { name:'Message', data() { return { messageList:[ {id:'001',title:'消息001'}, {id:'002',title:'消息002'}, {id:'003',title:'消息003'} ] } }, } //Detail.vue 消息编号：{{id}} 消息标题：{{title}} export default { name:'Detail', props:['id','title'], } 7、router-link的replace属性 作用：控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式：分别为push 和replace ，push 是追加历史记录，replace 是替换当前记录。路由跳转时候默认为push 如何开启replace 模式：News 8、编程式路由导航作用：不借助 实现路由跳转，让路由跳转更加灵活 //$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() //可前进也可后退 vue路由1、vue-router 的理解2、嵌套路由（多级路由）3、query参数4、命名路由5、params参数6、路由的props配置7、router-link的replace属性8、编程式路由导航9、缓存路由组件10、两个新的生命函数钩子11、路由守卫12、路由器的两种工作模式13、路由懒加载 //Banner.vue
Vue Router Demo
后退
前进
测试一下go
export default {
name:'Banner',
methods: {
back(){
this.$router.back()
},
forward(){
this.$router.forward()
},
test(){
this.$router.go(3)//前进三层
}
},
}
//Message.vue
{{m.title}}
push查看
replace查看
export 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
}
})
}
},
}
//route.js
import VueRouter from 'vue-Router'
import About from '../page/About.vue'
import Home from '../page/Home.vue'
import News from '../page/News.vue'
import Message from '../page/Message.vue'
import Detail from '../page/Detail.vue'
export default new VueRouter({
routes:[
{
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($route){
return {
id:$route.query.id,
title:$route.query.title,
a:1,
b:'hello'
}
}
}
]
}
]
}
]
})
9、缓存路由组件 让不展示的路由组件保持挂载，不被销毁。 include=“组件名”，如果不写，就缓存当前区域的所有路由 //Home.vue Home组件内容 News Message export default { name:'Home', } 10、两个新的生命函数钩子作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。 activated 路由组件被激活时触发。deactivated 路由组件失活时触发。切换到显示News组件时，激活activad，切走激活deactived //News.vue 欢迎学习Vue news001 news002 news003 export default { name:'News', data() { return { opacity:1 } }, activated() { console.log('News组件被激活了') this.timer = setInterval(() => { this.opacity -= 0.01 if(this.opacity { console.log('beforeEach',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则 next() //放行 }else{ alert('暂无权限查看') // next({name:'guanyu'}) } }else{ next() //放行 } }) 11.1.2、全局后置路由守卫初始化的时候被调用、每次路由切换之后被调用 router.afterEach((to,from)=>{ console.log('afterEach',to,from) if(to.meta.title){ document.title = to.meta.title //修改网页的title }else{ document.title = 'vue_test' } }) 11.2、独享路由守卫 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, a:1, b:'hello' } } } ] } ] } ] }) 11.3、组件路由守卫前置后置路由守卫是写在router.js里面的，组件内路由守卫写在组件页面内，前置后置路由守卫是全局守卫，每当路由切换前后都会调用。而组件路由守卫看有没有按照路由规则，进入或者离开调用 //进入守卫：通过路由规则，进入该组件时被调用 beforeRouteEnter (to, from, next) { }, //离开守卫：通过路由规则，离开该组件时被调用 beforeRouteLeave (to, from, next) { } //About.vue 我是About的内容 export default { name:'About', //通过路由规则，进入该组件时被调用 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() } } 12、路由器的两种工作模式 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。 hash模式： 地址中永远带着#号，不美观 。 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。 兼容性较好。 history模式： 地址干净，美观 。 兼容性和hash模式相比略差。 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。如果是node做后端可以使用connect-history库，或者使用nginx服务器进行中间代理。 13、路由懒加载解决首页渲染加载事件慢，提高页面首次渲染时间 正常编写 import VueRouter from 'vue-Router' import Home from '../page/Home.vue' import About from '../page/About.vue' export default new VueRouter({ routes:[ { path:'/home', component:Home, }, { path:'/about', component:About } ] }) vue路由1、vue-router 的理解2、嵌套路由（多级路由）3、query参数4、命名路由5、params参数6、路由的props配置7、router-link的replace属性8、编程式路由导航9、缓存路由组件10、两个新的生命函数钩子11、路由守卫12、路由器的两种工作模式13、路由懒加载 懒加载按需导入，点击about后才会有about.js,且index.js1将减小 import VueRouter from 'vue-Router' import Home from '../page/Home.vue' // import About from '../page/About.vue' export default new VueRouter({ routes:[ { path:'/home', component:Home, }, { path:'/about', // component:About component:()=> import(/* webpackChunkName: "about" */ '../page/About.vue') } ] }) vue路由1、vue-router 的理解2、嵌套路由（多级路由）3、query参数4、命名路由5、params参数6、路由的props配置7、router-link的replace属性8、编程式路由导航9、缓存路由组件10、两个新的生命函数钩子11、路由守卫12、路由器的两种工作模式13、路由懒加载
|
【本文地址】
今日新闻 |
推荐新闻 |