vue中的路由vue-router

路由

路由模式

vue-router默认hash模式，使用 URL 的 hash 来模拟一个完整的 URL，地址是：http://localhost:8080/#/

改路由模式为history后，地址是：http://localhost:8080/

//router>index.js中 export default new Router({ mode:'history', routes: [ ] })

懒加载

// import HelloWorld from '@/components/HelloWorld' //结论//导入的时候换成下面的方式就行 const HelloWorld = () => import('@/components/HelloWorld')

路由守卫

全局 //写在main.js中------------------ //1、全局导航守卫 //前置//可以阻止没有权限的人访问 router.beforeEach((to,from,next)=>{ //去哪 console.log('to:',to); //从哪来 console.log('from:',from); //全局添加页面标题//在路由里添加meta配置title document.title=to.meta.title next() }) //index中-------------------- //在路由里添加meta配置title { path: '/taoyuan', name: 'jieyi', component: taoyuan, meta:{//给文档添加title title:'first' } }, //2、后置//可以统计浏览页面的时间等beforeResolve //3、解析守卫afterEach 独享 //写在index.js的单个路由中------------------ { path: '/', name: 'HelloWorld', component: HelloWorld, beforeEnter: (to, from, next) => { console.log('hello'); next() } }, 单个组件独享 //写在组件里 export default { data() { return { name:'ring' } }, //进入组件之前 beforeRouteEnter (to, from, next) { //不能获取组件的实例，因为守卫是进入组件之前操作的 console.log('first的守卫'); next() } //beforeRouteUpdate//beforeRouteLeave }

响应路由参数的变化

多个页面渲染在同一个组件，复用更加高效，

但是页面没有刷新，数据不会更新，钩子函数不会再调用

监听 //获取数据的代码，在监听事件里监听路由变化时执行一次 //不用放在created内刷新页面 //用重新请求数据代替页面刷新 watch:{ $route(to,from){ this.getD(); } }, methods:{ getD(){ console.log('获取一遍数据'); } } beforeRouterUpdate,组件内的导航守卫 beforeRouterUpdate(to,from,next){ this.getD() next() }, methods:{ getD(){ console.log('获取一遍数据'); } }

通过编程实现路由跳转自身时

会报错，解决方法：

添加以下代码到router的index.js里

<button @click="$router.push('/first')">first</button> //解决： //router的index.js里 //编程式跳转自身路由出错时 const originalPush = Router.prototype.push Router.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err) }