Vue2.0三——Vue-router

我会从两个方面来写路由

自定义路由(以拉勾网为例)

路由指的是在不刷新页面的情况下更新页面

通过:#hash,例如:10.0.164.8:8080/index.html/#main 
然后通过H5的history对象的history.pushState()+popState事件实现路由切换

实现步骤:
(1)在script文件下创建路由表 routes.js

export default {
    '/' : 'Position' 首页
    '/search': 'Search',
    '/mine' : 'Mine'
}

(2)在app.js中匹配路径

import routes form  './routes'
//动态获取组件
new Vue({
    el : '#root',
    data:{
    //定义当前路径信息
      currentRoute: window.location.pathname   
    },
    computed : {    //生成子路由组件
        ViewComponent() {
            //根据路由找到匹配的组件名
            const MatchingView = routes[this.currentRoute];
            返回组件对象
            return MatchingView ? require(`./page/${MatchingView}.vue`) :require('./page/404.vue')
        }
    },
    //渲染组件
    render(h) {
        return h(this.ViewComponent)
    }
})

(3)在index.vue中的section放通过插槽存放porixtion mine search 组件

//插槽用来存放各个组件

(4)position.vue

import Index from './Index.vue'
export default {
    //导入Index组件
    data() {
        return{
            
        }
    },
    componets : {
        Index //定义Index组件
    }
}

将template的内容外层用 包(Index建个插槽)

(5)同理search也一样

search.vue
import Index from './Index.vue'
export default {
    //导入Index组件
    data() {
        return{
            
        }
    },
    componets : {
        Index //定义Index组件
    }
}

将template的内容外层用 

(6)点击链接切换组件

通过history提供的事件
window.addEventListener('popstate',function(){
    vm.currentRoute = window.location.pathname
},false)

(7)定义点击切换组件时的a标签组件

VLink.vue 写逻辑
    

    import routes from '../routes'
    export default {
        props : {               //对象类型
            href: {
                type : String,
                required : true
            }
        },
        computed: {
            isActive () {
            
                return this.href == this.$root.currentRoute
            }
        },
        methods:{
            go(){
               this.$rout.currentRoute = this.href
               window.history.pushState(null,routes[this.href],this.href)
            }
        }
    }

(8)通用组件,Vlink.vue 在index.vue中引入

import VLink form '../../vlink.vue'
在index.vue里找到底部 ul li 用 v-link 标签包住
通过a链接 Vue.component('VLink',{ template })

vue-router

还是框架简单 来来来

路由有三种导航钩子:

  • 1 、全局导航钩子

    beforeEach
    beforeResolve
    afterEach

       每个钩子方法接收三个参数:
       to: Route : 即将要进入的目标 [路由对象]
       from: Route : 当前导航正要离开的路由
       next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next
       方法的调用参数。
       next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed (确认的)。
       next(false): 中断当前的导航。
       如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from
       路由对应的地址。
       next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
       
       确保要调用 next方法,否则钩子就不会被 resolved。

    例子:

       const router = new VueRouter({ ... })
       router.beforeEach((to, from, next) => {
           // do something 
           next();
       });
       
       router.afterEach((to, from, next) => {
           console.log(to.path);
       });
       
      原文链接:http://blog.csdn.net/sinat_17775997/article/details/68941078
  • 2 、某个路由独享的导航钩子

    beforeEnter

  • 3 、路由组件里的导航钩子

    beforeRouteEnter
    beforeRouteUpdate (2.2 新增)
    beforeRouteLeave
    例子:

    let fromPath = '';
    export default{
       beforeRouteEnter (to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不!能!获取组件实例 `this`
            // 因为当钩子执行前,组件实例还没被创建
            fromPath = from.path;
            next();
       },
    }
    

(1)安装插件 npm i vue-router -D

app.js引入:
import Vue from 'vue'
import VueRouter from 'vue-router'
import '../../app.scss'
import routes from './routes'

Vue.use(VueRouter)

const routes = new VueRouter({
    routes
})
new Vue({
    el:'#root',
    router
})

配置:
webpack.config.js,跟plugins同级
externals : {
    'vue' : 'window.Vue'
    'vue-router':'window.VueRouter'
}
会将第三方组件抽离出去
把node_modules/vue/dist/vue.min.js
/vue/dist/vue-router/vue-router.min.js
放到根目录并在index.html中引入

这样减小了app.js的大小

(2)定义

1、 scripts下创建routes.js

import Index frmm './pages/Index.vue'
import Position from './pages/Position.vue'
import Search from './pages/Search.vue'
import Mine from './pages/Mine.vue'

路由表:
export default [
    {
        path: '/',
        componebt: 'Index',
        childern: [
            {
                path:'/position',
                component : Position,
            },
            {
                path:'/search',
                component : Search
            },
            {
                path:'/mine',
                component : Mine
            },
        ]
    }
]

2.首页 更改入口
    index.html
    
    
    index.vue
    
    
index.vue
import {routerLink} from 'vue-router'
//声明式跳转

    去详情页
 
获取:this.$route.params.xid
编程时跳转
this.$router.history.push({name:'Detail',params:{xid:123}})

你可能感兴趣的:(javascript,webpack)