vue-router 安装 配置 学习

1. 安装

npm install vue-router --save


// 配置路由的相关信息 router index.js
import VueRouter from 'vue-router'
import Vue from 'vue'

// 配置路由的相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

//1. Vue.use(插件)， 安装插件
Vue.use(VueRouter)

//2. 创建v VueRouter 对象
const routers = [

]

const router = new VueRouter({
    routers
})

export default router

前端路由中使用location.hash = "/" 或者 h5中 history.pushState({},'','/')或者history.replaceState({},'','/') 这里网页不能前进后退或者history.go(-1)相当于history.back() 而不进行网页的刷新

2. 路由导航守卫

• 全局守卫

router.beforeEach((to,from,next) => {
    //from -> to
    document.title = to.meta.title
    console.log('to',to)
    //必须使用
    next()
})

• 独享守卫

{
        path: '/about',
        meta: {
            title: '关于'
        },
        component: About,
        beforeRouteEnter (to, from, next) {
            // 在渲染该组件的对应路由被 confirm 前调用
            // 不！能！获取组件实例 `this`
            // 因为当守卫执行前，组件实例还没被创建
          }
    },

• 组件内守卫