VueRouter是什么
VueRouter是对组件映射到路由的一种管理方式,主要应用场景是配合vue打造SPA应用，实现无刷新改变局部内容，带来良好的用户体验
基本使用
安装
cnpm i vue-router
使用
import Vue from 'vue'
import VueRouter from 'vue-router'
import Foo from '../components/Foo.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes:[
{
path:'/foo',
component: Foo
}
]
})
export default router
在main.js中注入
import router from './router'
new Vue({
router,
render: h => h(App),
}).$mount('#app')
router-link和router-view
<router-link to="/foo?id=1&name=xxx"><button>foo</button></router-link>
<!-- 路由跳转，会被vue-router解析为a链接
to:表示目标路由的链接：当被点击后,内部会吧to的值传给router.push(),这个值可以是String|Object
-->
<router-view></router-view>
<!-- 路由视图组件,根据路由匹配到的组件会放这里 -->
query和params
query使用
<router-link to="/foo?id=1&name=xxx"><button>foo</button></router-link>
<router-link :to="{path:'/bar',query:{id:1,name:'xxx'}}"><button>bar</button></router-link>
query获取
id-{{$route.query.id}} name-{{$route.query.name}}
<!-- query传参类似于get请求后的字符串拼接,可已是String和Object,通过$route.query可以获取 -->
params的使用
<router-link to="/foo/1/xxx"><button>foo</button></router-link>
<router-link :to="{path:'/bar',params:{id:1,name:'xxx'}}"><button>bar</button></router-link>
params的获取
<div>id-{{$route.params.id}} name-{{$route.params.name}}</div>
path:'/foo/:id/:name',
与query不同的是params需要在路由中占位
路由组件传参
简便的params的获取方式
$route方式获取
<div>id-{{$route.params.id}}name-{{$route.params.name}}</div>
组件传参方式获取
设置
props:true
props: { newsletterPopup: false }
props({query}){
return {id:query.id,name:query.name}
}
获取
props:['id','name'],
使用：就正常{{}}方式使用
/* 在配置项中配置props:组件中用props接受，支持Boolean|Object|Function形式 */
/* 为Boolean值true时，query所有的参数都会参到props中 */
嵌套路由和命名路由
children: [
{
// 当 /foo/:id/:name 匹配成功，
// UserProfile 会被渲染在 Foo <router-view> 中
path: 'profile',
component: UserProfile
name: 'userProfile',
},
注意此处的path不用加/会自动添加
]
当层级过多时,可以加入name配置项，跳转时直接访问name即可
<router-link :to="{ name: 'userProfile', params: { id: 123 }}">foo</router-link>
编程式导航
借助$router的实例方法，通过编程实现路由跳转
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)
// 前进 3 步记录
router.go(3)
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
导航守卫
全局前置守卫
初始化执行，切换时执行
router.beforeEach((to,from,next) => {
to //即将要进入的目标对象
from //当前导航正要离开的路由
next //函数 用来resolve，调用next()后才会进行下一步
})
全局后置守卫
初始化执行，切换时执行,一般进行收尾工作，比如设置title
router.beforeEach((to,from) => {
to //即将要进入的目标对象
from //当前导航正要离开的路由
})
路由独享守卫，单个路由生效
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
组件内的守卫
用路由规则进入组件前被调用，import 引入方式不会调用
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
用路由规则离开组件前调用
beforeRouteLeave(to, from, next) {
}
hash模式和history模式
hash
#和#后的内容不会发送给服务器
history
默认开启的是hash模式
通过mode:'history'可改变
区别
1.history兼容性略差
2.history刷新时会根据全部的url去请求服务器路径,需要后端人员配合解决
