在学习了vue-router之后总结的基础用法:路由的创建与配置,路由规则的编写,路由组件的访问,参数的传递,路由的生命周期函数,路由守卫的方法和作用…等常用的一些知识点
路由作用:实现SPA single page web application 单页面web应用
SPA的简单理解:
vue-router的模式:(key)某个资源路径 ==> (value)对应的组件
配置方法
创建router目录下index.js文件,引入vue-router插件和组件,配置路由
//引入vue-router插件
import VueRouter from 'vue-router'
import About from '../components/About.vue' //组件
import Home from '../components/Home.vue'
//配置路由
export default new VueRouter({
routes:[
{
path:'/about', //设置路径
component:About
},
{
path:'/home',
component:Home
},
]
})
在main.js中引入插件和上面的配置文件
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'
Vue.config.productionTip = false
Vue.use(VueRouter)
new Vue({
router:router,
render: h => h(App),
}).$mount('#app')
使用:
对于a标签的链接使用该标签与 to 属性访问对应组件
About
使用 router-view 展示组件
配置子路由使用children属性:
{
path:'/home',
component:Home,
//配置子路由
children:[
{
path:'message', //子路由不需要加 ‘/’
component:Message,
children:[
{
name:'detail',
path:'item',
component:Item
}
]
},
{
path:'news',
component:News
}
]
},
name属性:
可以为该路由命名,在链接跳转的标签中使用name从而避免过长的路径名
query属性:
在路由组件中传递数据
query传递参数
风格:http://localhost:8080/#/home/message/item?id=001&info=消息001
接受数据:
$route.query.id
$route.query.info
params传递参数:
1.需要在路由path中配置参数占位,表明由params接收:
path:'message', //子路由不需要加 ‘/’
component:Message,
children:[
{
name:'detail',
path:'item/:id/:info', //表明用params接收传递的占位参数
component:Item
}
]
2.在to中传入配置对象参数属性:
{{msg.id}}-{{msg.title}}
注意:使用params传参需要路由不能使用path属性,而是必须使用name属性
风格:http://localhost:8080/#/home/message/item/003/消息003
3.接收参数
常用的两个用法:
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第二种函数写法:props值为函数,该函数返回的对象中每一组key-value都会通过props传给Detail组件 函数接受的参数为route对象
props(route){
return {
id:route.query.id,
title:route.query.title
}
}
//使用解析构值语法写成:
props({query}){ //{params}
return {
id:query.id,
title:query.title
}
}
}
注意:用法一只是针对params参数传递,而方法二更灵活
接收参数的方式:
直接在接收参数的路由组件当中声明props属性接收
作用:控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录利用栈结构管理。有两种写入方式:分别为push
和replace
,
push
是追加历史记录
replace
是替换当前记录。路由跳转时候默认为push
如何开启replace
模式:
router-link在模板解析后是a标签,而要实现其他方式实现路由跳转
//$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() //后退
路由的默认缓存机制:路由组件在被点击时挂在,而在切换到其他组件时自动销毁
因此组件中临时的缓存就被清除,要实现某些路由组件切换时其中有要保留的缓存,即路由不被销毁,使用`````标签:
//多个请使用 :include="['a','b']"
activated
路由组件被激活时触发。deactivated
路由组件失活时触发。activated(){
//该路由组件激活时触发
}
deactivated(){
//该路由组件失活时触发
}
作用:对路由进行权限控制
分类:全局守卫、独享守卫、组件内守卫
全局守卫:
//全局前置守卫:初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
...(编写相应的放行规则或条件判断)
next() //放行
}
})
//全局后置守卫:初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
...(编写放行后进入组件后实现的方法)
})
独享守卫:在路由配置项中配置
beforeEnter(to,from,next){
...(编写相应的放行规则或条件判断)
next()//放行,与全局前置一样,但是这是对单个组件应用
}
组件内守卫:在对应组件中使用**(注意:该组件是必须经过路由规则才会触发)**
//进入守卫:通过路由规则,进入该组件时被调用
beforeRouteEnter (to, from, next) {
},
//离开守卫:通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {
}
vue中路由配置默认mode=”hash“,即在url中端口号后面有 “#” 号,目的在于使得井号后面的路径不会作为后端访问路径向服务器请求
解决的方式是mode=“history”,这种模式是使得其路径能够向服务器发送请求,但是对于静态资源,如果在该路径下刷新就会404,所以依靠后端技术处理该问题
以上是关于vue-router组件一些基础的使用方法