vue-router 和 react-router

react-router 设计上和 vue-router 一样

三种模式

memory history

不修改 url ，路由地址在内存中，但页面刷新会重新回到首页。

browser history

• 使用history.pushState来改 url
• 使用window.onpopstate监听url,
• 需要后端nginx配合返回index.html

hash history

使用 url hash 变化记录路由地址

// hash路由 --> http://127.0.0.1:8881/hash.html?a=100&b=20#/aaa/bbb
location.protocol // 'http:'
location.hostname // '127.0.0.1'
location.host // '127.0.0.1:8881'
location.port // '8881'
location.pathname // '/hash.html'
location.search // '?a=100&b=20'
location.hash // '#/aaa/bbb'
复制代码

路由懒加载

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/goods'  //重定向
    },
    {
      path: '/goods',
      name: 'goods',
      component: ()=>import('@/pages/goods') // <<=======================================
    },
    {
      path: '/ratings',
      name: 'ratings',
      component: ()=>import('@/pages/ratings') // <<======================================= 
    },
    {
      path: '/seller',
      name: 'seller',
      component: ()=>import('@/pages/seller') // <<=======================================
    },
  ]
})
复制代码

路由守卫

登录验证

import Router from 'vue-router'

const router = new Router({
    routers: [
        {path: '/', name: 'home', component: Home}
        ...
        ...
    ]
})

router.beforeEach((to, from, next) => {
  const isLogin = localStorage.eleToken ? true : false;
  if (to.path == "/login" || to.path == "/register") {
    next();
  } else {
    isLogin ? next() : next("/login");
  }
})

// 所有的页面跳转之后
router.afterEach((to, from, next) => {

})
复制代码

局部守卫

在路由配置文件使用

import Home from '../views/Home'

export default [
    {
        path: '/',
        alias: '/home',
        name: 'home',
        component: Home,
        // 参数1 : to表示要跳转到的路由
        // 参数2 : from表示要离开的路由
        // 参数3 : next
        beforeEnter: (to, from, next) => {
            if(from.path==="login") alert('这是从登录页来的')
            next() // 注意: 在你的所有逻辑处理完以后一定要调用 next 函数, 否则页面是不会成功跳转的
        }
    },
    ...
    ...
]
复制代码

组件内使用

    export default {
        data: () => ({

        }),
        methods: {

        },
        // 这是路由的钩子函数
        // 注意 : 这里面不要用this, 因为这时组件还没有被实例化
        beforeRouteEnter(to, from, next) {
            alert(from.path)
            next()
        },
        // 注意 : 这里可以使用this
        beforeRouteLeave(to, from, next) {
            const will_leave = confirm('你确定要离开吗?')
            if(will_leave) next()
            else next(false)
        },
        // 当路由发生变化, 组件被复时触发
        // 例如 : 详情页面之间的跳转('detail/123' ==> 'detail/456')
        // 注意 : 这里可以使用this
        beforeRouteUpdate(to, from, next) {

        },
    }
复制代码