正文
vue1升级到vue2的问题
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
- router 不能用map方法了，需要改router的结构改为
routers= [
{ // 当没有匹配路由时默认返回的首页
path:'/index',
component: index,
authenticate:true
},
{ // 当没有匹配路由时默认返回的首页
path: '/spa/',
component: index,
authenticate:true
}]; //这种形式的
var router = new VueRouter({
mode: 'history',
base: __dirname + '/spa',
routes: routers
})
- 最后的启动函数也变了
const app = new Vue({
store,
router: router,
render: h => h(App)
}).$mount('#app')
- 还有router方法的参数也变了， 组件内部的钩子函数也变了
组件内部的route:{data(transition)}改为
beforeRouteEnter(to, from, next){
console.log(to.path);
next();
},
它的三个参数：
-
-
to: (Route路由对象)即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta -
from: (Route路由对象)当前导航正要离开的路由 -
next: (一定要调用该方法来 resolve 这个钩子。Function函数)
-
调用方法：next(参数或者空) ***必须调用
next(无参数的时候)
: 进行管道中的下一个钩子，如果走到最后一个钩子函数，那么
导航的状态就是 confirmed （确认的）
next('/')
或者
next({ path: '/' })
:
跳转到一个不同的地址
。当前的导航被中断，然后进行一个新的导航。
vue2.x中的路由钩子函数：
a、最先执行的是 beforeEach钩子，所有路由开始的时候最先执行。用来判断用户是否登录和其他页面未进入之前的状态
b、 某个路由独享的钩子 beforeEnter
const router = new VueRouter(
{ routes: [
{ path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => { // ... }
} ]
})
c、组件内的钩子函数
-
beforeRouteEnter -
beforeRouteUpdate(2.2 新增) -
beforeRouteLeave
beforeRouteEnter (to, from, next) {} 与 beforeRouteLeave不再是组件中route配置下的对象了，他们和data处于同级别的地位。
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是改组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
} }
可以看出： 新设计的路由 淡化了组件自身跟着路由生命周期变化而变化，而是依赖组件自身的生命周期。
那么接下来：
ajax调用时机：相对于组件来说的，而且应该是在路由进入之前开始准备的 所以 beforeRouteEnter是调用ajax的时机。
watch这一函数可以监听路由$route变化。
beforeRouteLeave在组件的生命周期完成后，且旧路由即将切换走，新路由beforeEach的时机执行。
关于导航的知识参考
http://router.vuejs.org/zh-cn/advanced/navigation-guards.html
- import 引入的时候不能用｛｝这个包涵，否则不显示，如果要用｛｝扩起来的话，需要用exports暴露出来
- 将v-link了换成了router-link to="url"
- 在属性上不能直接写src={{}}，而是要写成:src=""
-
vuex的这个错误
是因为babel解析错误，需要安装
npm install --save-dev babel-plugin-transform-object-rest-spread，
并且在webpack.js 中修改babel的配置
babel: {
"presets": ["es2015"],
plugins: ['transform-object-rest-spread']
}
vue2中也有如何从vue1升级到vue2的方法，参考
http://cn.vuejs.org/v2/guide/migration.html
未完待续。。。
