1. 基本使用
一个路径对应一个组件;路由就是一组key-value的对应关系(路径和组件的对应关系)
1.1. 初始化
-
npm i vue-router //是个插件
-
import VueRouter from ‘vue-router’
-
Vue.use(VueRouter)
-
import router from ‘./router’ ,然后在new Vue里面添加一个配置项router
-
在src文件夹里新建一个router文件夹,下建一个index.js文件 //类似vuex的store
1.2. index.js
import VueRouter from 'vue-router'
import About from '../components/About' //记得引入组件
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
]})
export default router
1.3. router-link
用于替代a标签,实现路径的更改(路由的切换)
<router-link to="/about">切换</router-link>
//一样可以在里面写class添加样式
1.4. router-view
该标签用于指定组件的呈现位置
2. 几个注意点
-
将路由组件放在pages文件夹下(和components同级),用于和一般组件区分
-
组件的切换默认是将隐藏了的组件销毁,需要的时候再去挂载
-
路由组件会多两个属性,分别是route和router,route各不相同,但router是同一个,router是整个VueRouter实例对象
3. 嵌套(多级)路由
-
在routers的某一个路由里添加一个属性children:[ {},{} ] //与path,component同级,且里面的路径不需要再加/
-
router-link里面的to="/home/news" 得加上上级路径,即完整路径
4. 命名路由
- 给路由命名:在route对象里面添加一个配置name:‘hello’, 和path同级
- 简化跳转:
:to="{name:'hello'}"
//不需要再写完整的路径,对于对象写法就直接替代path
5. 路由传参
5.1. query参数
-
to的字符串写法
:to="'/home/message/detail?id=${m.id}&title=${m.title}'"
//注意是反引号`` -
to的对象写法
:to="{ path:'/home/message/detail', query:{id:m.id, title:m.title} }"
-
接收使用:$route.query.id
5.2. params参数
:to="'/home/message/detail/${m.id}/${m.title}'"
需在对应的path里面写path:’/home/message/detail/:id/:title’ //注意冒号在前,表示占位符
对象形式只允许写name,不能写 path
5.3. props配置
在route对象里添加一个配置props,将他写成函数:
props($route){
return { id:$route.query.id, title:$route.query.title }
} //这样就可以把所有参数以props的方式传给子组件,简化代码(子组件可以不用再加前缀$route.query.id),而可以直接写id,记得用props:[]接收
6. replace属性
是用在router-link标签里的一个属性,表示浏览器历史记录的写入方式为replace,
即替换当前记录:将当前记录销毁,换成点击之后的路径
浏览器默认写入方式为push,在栈里面追加一个记录,浏览器的后退按钮会将指针下移,前进按钮上移
7. 编程式路由导航
不借助router-link实现路由跳转,让路由跳转更加灵活
this.$router.push({ path:’’ , query:{} }) //push方式跳转,注意是router
this.$router.replace({}) //replace方式跳转
this.$router.back() //回退,浏览器后退到前一个路由地址
this.$router.forward() //浏览器前进
this.$router.go() //传入一个数字,正数表示前进多少步,负数表示后退
8. 路由完善
8.1. 缓存路由组件
让不展示的路由组件保持挂载,不被销毁
切换路由组件的时候默认会销毁之前的组件,而若不想销毁(有时候用于保存用户输入),即缓存该组件,则只需在对应位置用此标签包裹:
<keep-alive include="News"><router-view></router-view></keep-alive>
include表示选择哪个组件进行缓存(多个写成数组),使用的是组件名,不写则所有组件都不销毁
8.2. 两个新的生命周期钩子
路由组件独有的生命周期钩子,用于捕获路由组件的激活状态
activated(){} //激活(展现这个组件就是激活)
deactivated(){} //失活,在这里面可以把定时器停掉,防止组件缓存导致beforeDestroy不调用
8.3. 路由守卫
用于设定访问权限;to,from是对应路由的route属性,next是个函数,调用next()表示跳转,没调用就不跳
-
全局前置路由守卫(写在index.js里,与const router同级)
router.beforeEach((to,from,next)=>{})
//每一次路由切换之前被调用,以及初始化时在路由里面添加一个配置项meta(路由元信息),里面可以写任何属性,添加一个inAuth属性用于判断是否需要鉴权
-
全局后置路由守卫
router.afterEach((to,from)=>{})
//每一次路由切换之后以及初始化时被调用,没有next -
独享路由守卫(写在单个route对象里面)
添加一个配置:beforeEnter: (to,from,next)=>{} //只用于该组件
-
组件内路由守卫(写在组件里面,与name,data等平级)
- beforeRouteEnter(to,from,next){} //通过路由规则,进入该组件时被调用
- beforeRouteLeave //通过路由规则,离开该组件时被调用
8.4. 路由器工作模式
hash:路径有/#,且后面的内容不发送给服务器,兼容性比较好;#及其后面的内容就是hash值
history:没有/#,所有内容都会发送给服务器,刷新可能会出问题(需后端人员解决),比较简洁
打包:npm run build