路由
-
理解:一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)管理。
-
前端路由:key是路径,value是组件。
1.基本使用
-
安装vue-router,命令:
npm i vue-router
-
应用插件:
Vue.use(VueRouter)
-
编写router配置项:
//引入VueRouter import VueRouter from 'vue-router' //引入组件 import About from '../components/About' import Home from '../components/Home' //创建并暴露router实例对象,去管理一组组的路由规则 export default new VueRouter({ routes:[ { path:'/about', component:About }, { path:'home', component:Home } ] })
-
实现切换(active-class可配置高亮样式)
<router-link active-class="active" to="/about">About</router-link>
-
指定展示位置
<router-view></router-view>
2.几个注意点
-
路由组件通常存放在
pages
文件夹,一般组件存放在components
文件夹。 -
通过切换,“隐藏”了的路由组件,默认是被销毁的,需要的时候再去挂载。
-
每个组件都有自己的
$route
属性,里面存储着自己的路由信息。 -
整个应用只有一个router,可以通过组件的
$router
属性获取到。
3.多级路由(嵌套路由)
-
配置路由规则,使用children配置项:
routes:[ { path:'/about', component:About }, { path:'/home', component:Home, children:[//通过children配置子级路由 { path:'news',//此处不要写'/news' component:News, }, { path:'message',//此处不要写'/message' component:Message, } ] } ]
-
跳转(要写完整路径):
<router-link to='/home/news'>News</router-link>
4.路由的query参数
-
传递参数:
<!-- 跳转并携带query参数,to的字符串写法 --> <router-link :to="/home/news/detail?id=666&title=你好">News</router-link> <!-- 跳转并携带query参数,to的对象写法 --> <router-link :to="{ path:'/home/news' query:{ id:666, title:'你好' } }" >News</router-link>
-
接收参数
$route.query.id $route.query.title
5.命名路由
-
作用:可以简化路由的跳转。
-
如何使用:
-
给路由命名:
routes:[ { path:'/about', component:About }, { path:'/home', component:Home, children:[//通过children配置子级路由 { name:'xinwen' path:'news',//此处不要写'/news' component:News, }, { name:'xiaoxi' path:'message',//此处不要写'/message' component:Message, } ] } ]
-
简化跳转
<!--简化前,使用完整路由跳转--> <router-link :to="/home/news/detail">News</router-link> <!--简化后,使用名字直接跳转--> <router-link :to="{name:xinwen}">News</router-link> <!--简化前,使用完整路由配合传值跳转--> <router-link :to="/home/news/detail?id=666&title=你好">News</router-link> <!--简化后,使用完整路由跳转--> <router-link :to="{ name:'xinwen', query:{ id:666, title:'你好' } }">News</router-link>
-
6.路由的params参数
-
配置路由声明接收params参数
{ path:'/home', component:Home, children:[ { path:'news', component:News, }, { path:'message', component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', component:Detail } ] } ] }
-
传递参数
<!--跳转并携带params参数,to的字符串写法--> <router-link :to="/home/news/detail/666/你好">News</router-link> <!--跳转并携带params参数,to的对象写法--> <router-link :to="{ name:'xiangqing', params:{ id:666, title:'你好' } }">News</router-link>
注意:路由携带params参数时,若使用to的对象写法,则不能用path配置项,只能用name
-
接收参数
$route.params.id $route.params.title
7.路由的props配置
作用:让路由组件更方便的收到参数
{ name:'xiangqing', path:'detail/:id/:title', component:Detail, //第一种写法:props值为对象,该对象中所有的key:value的组合最终都会通过props传给Detail组件 props:{a:900} //第二种写法:props值为bool值,bool值为true,则把路由收到的所有params参数通过props传给Detail组件 props:true //第二种写法:props值为函数,该函数返回的对象中每一组key:value都会通过props传给Detail组件 props(route){ return{ id:route.query.id, title:route.query.tiele } } }
8.<router-link>
的replace属性
-
作用:控制路由跳转时操作浏览器历史记录的模式。
-
浏览器的历史记录有两种写入方式:分别是
push
和replace
,push
是追加历史记录,replace
是替换当前记录,路由跳转的时候默认为push
-
如何开启
replace
模式:<router-link replace ...>News</router-link>
9.编程式路由导航
-
作用:不借助
<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()//可前进也可后退
10.缓存路由组件
-
作用:让不展示的路由组件保持挂载,不被销毁。
-
具体编码:
<keep-alive include = "组件名"> <router-view></router-view> </keep-alive>
11.两个新的生命周期钩子
-
作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。
-
具体名字:
-
activated
路由组件被激活时触发。 -
deactivated
路由组件失活时触发。
-
12.路由守卫
-
作用:对路由进行权限控制
-
分类:全局守卫、独享首位、组件内守卫
-
全局守卫
const router = new VueRouter({ routes:[ { path:'/about', component:About, meta:{isAuth:true,title:'关于'}//meta用于自定义属性,一般用isAuth表示是否需要进行权限控制 }, { path:'home', component:Home, meta:{title:'主页'} } ] }) //全局前置守卫,初始化时执行,每次路由切换前执行 router.beforeEach(to,from,next)=>{//to:跳转到的路由 from:被跳转路由 next()放行 if(to.meta.isAuth){//判断是否需要进行权限控制 //权限控制的具体规则 }else{ } } //全局后置守卫,初始化时执行,每次路由切换后执行 router.afterEach(to,from)=>{//to:跳转到的路由 from:被跳转路由 if(to.meta.title){ document.title = to.meta.title//修改网页title }else{ document.title = 'test' } } export default router
-
独享路由守卫
const router = new VueRouter({ routes:[ { path:'/about', component:About, meta:{isAuth:true},//meta用于自定义属性 beforeEnter(to,from,next){ if(to.meta.isAuth){//判断当前路由是否需要进行权限控制 }else{ } } }, { path:'home', component:Home } ] })
-
组件内路由守卫
//进入路由守卫,通过路由规则,进入该组件时被调用 beforeRouteEnter(to,from,next){ }, //离开守卫,通过路由规则,离开该组件时被调用 beforeRouteLeave(to,from,next){ }
13.路由器的两种工作模式
-
对于一个url来说,什么是hash值?----#及其后面的内容就是hash值。
-
hash值不会包含在http请求中,即:hash值不会带给服务器
-
hash模式:
-
地址中永远带着#,不美观。
-
若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记不合法。
-
兼容性较好。
-
-
history模式:
-
地址干净美观。
-
兼容性和hash模式相比略差。
-
应用部署上线时需要后端人员支持,解决刷新页面服务端404问题。
-
-
模式调节:
const router = new VueRouter({ mode:'history', routes:[ ... ] })