# Vue-router学习笔记 标签（空格分隔）： vue 前端开发 --- ## 1. 起步 + 下载 - npm i vue-router -S + 安装 - import VueRouter from 'vue-router' - Vue.use(VueRouter) + 使用 ```<body> <div id="app"> <router-view></router-view> </div> <script> let home = { template: ` <div><h1>home页面</h1></div> ` } const router = new VueRouter({ routes: [ {path:'/home', component: home}, {path: '/',redirect: '/home'} ] }) const vm = new Vue({ el: '#app', data: {}, methods: { }, router }) </script> ``` ## 2. 进阶 ### 1.路由嵌套 ``` const router = new VueRouter({ routes: [ { path:'/home', component: home, children: [//注意:子路由前面不能加'/'路径router-link的to属性引用时,必须写全路径'/home/homeson' {path: 'homeson',component: homeson} ] },//redirect 重定向 {path: '/',redirect: '/home'} ] }) ``` ### 2. 路由视图 + 当一个路由需要同时指定多个组件渲染规则时,应用命名的方式来指定相应的渲染规则 ``` <div id="app"> <router-view></router-view> <router-view name="top"></router-view> <router-view name="left"></router-view> <router-view name="right"></router-view> </div> <script> { path: '/index', components: { //注意,这里是components而不是component default: com0, top: com1, left: com2, right: com3 //键是router-view的name属性值,值是指定该router-view渲染哪个组件(注意,当键为default时,默认没有设定name属性的router-view将会渲染该键对应的组件) } } </script> ``` ### 3. 重定向、别名、路由组件传参 + 重定向 ``` routes: [//redirect 接收三种写法的参数 当访问路由'/a'时会自动跳转到路由'/b' { path: '/a', redirect: '/b' }, { path: '/a', redirect: { name: 'foo' }}, { path: '/a', redirect: to => { // 方法接收 目标路由 作为参数 // return 重定向的 字符串路径/路径对象 }} ] ``` + 别名 ``` routes: [ // '/a'的别名为'/b'意味着,当访问路由'/b'时,会按照/a的匹配规则来操作'/b'也就是'/a'的小名 { path: '/a', component: A, alias: '/b' } ] ``` + 路由组件传参 ``` //在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }) // ``` + 通过 props 解耦 ``` const User = { props: ['id'], template: '<div>User {{ id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, props: true }, //对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项： { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] }) ``` ### 4. 导航守卫 #### 4.1 全局守卫 + 1.全局前置守卫 ``` router.beforeEach (to, from, next) => { // to 要去的路由对象 from要离开的路由对象 next 一个钩子函数,执行效果依赖next的参数--->next()执行下一个钩子函数,若钩子函数执行完毕,导航状态就是确认的(进行原本的跳转行为) //next(false)中断当前导航 next('/')或next({path:'/'})跳转到新的导航,当前导航终止 //next(error) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。 } ``` + 2.全局解析守卫 ``` //在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。 ``` + 3.全局后置钩子 ``` router.afterEach((to, from) => { // 和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身 }) ``` #### 4.2 路由独享的守卫 + 你可以在路由配置上直接定义,这些守卫与全局前置守卫的方法参数是一样的。 ``` const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] }) ``` #### 4.2 组件内的守卫 + 最后，你可以在路由组件内直接定义以下路由导航守卫 - beforeRouteEnter - beforeRouteUpdate - beforeRouteLeave ``` const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建,不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` } } ``` ### 完整的导航解析流程 1. 导航被触发。 2. 在失活的组件里调用离开守卫。 3. 调用全局的 beforeEach 守卫。 4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。 5. 在路由配置里调用 beforeEnter。 6. 解析异步路由组件。 7. 在被激活的组件里调用 beforeRouteEnter。 8. 调用全局的 beforeResolve 守卫 (2.5+)。 9. 导航被确认。 10. 调用全局的 afterEach 钩子。 11. 触发 DOM 更新。 12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
