Vue-Router

Vue-router

针对于我们的单页应用来说，页面跳转是不经过后端服务器的

// npm i vue-router -S
new Router({
  routes,
  mode: "history", // 路由模式改成一般形式，不再是 hash 路由形式【 这种形式不利于 SEO 】
  base: "/base/", // 作为路由基路径【非强制】
  // to 是即将要去的路由
  // from 是从哪来的路由
  // pos 是你的网页内容定位
  scrollBehavior(to, from, pos) {
    if (pos) {
      return pos;
    } else {
      return { x: 0, y: 0 };
    }
  },
  // 因为不是所有浏览器都支持路由切换但是不刷新
  // 而且组件已经替换的形式【还是正常路由形式】

  fallback: false, // 单页应用就变成了多页应用【路由切换会向后台发送数据请求 】

  //fallback:true// 这就表示如果浏览器不支持这种形式就会自动变成 hash 路由的形式
});

• 路由配置

[
  {
    path: "/app",
    component: todo,
    name: "todo",
    // 增加元信息
    meta: {
      title: "my todos",
      description: "",
    },
    beforeEnter((to, from,next)=>{
      // 在进入到本路由的时候执行
      next()
    }),
    children: [
      {
        path: "/other/:id",
        props: true, // 这样 :id 的数据就会传入到 other 组件中【通过 props 拿到值】
        /*
        // 或者自定义 props
        props:(route)=>{id:123}
        */
        component: other,

        component:() => import ("other.vue")//如果不支持这种语法那么：
        /*
          npm i babel-plugin-syntax-dynamic-import -D

          // .babelrc
          {
            "presets":["env"],
            "plugins":[
              "syntax-dynamic-import"
            ]
          }
        */
      },
    ],
  },
];

/*





{
  path:"/app",
  components:{
    default:todo,// 没有命名的 router-view
    some:some,// 命名 router-view
  }
}
*/

• 路由信息

mounted(){
  console.log(this.$route)
}

• 导航守卫

// index.js

// 路由跳转之前
router.beforeEach((to, from, next) => {
  // do something
  console.log(to);
  if (to.fullPath === "/admin/*") {
    // 校验是否已登录
    next("/login");
    // next({path:"/login",name:"login", ...})
    // or
    // next();
  }
});

// 路由
router.beforeResolve((to, from, next) => {
  // do something
  next();
});

// 路由已经跳转完成
router.afterEact((to, from) => {
  // do something
  next();
});

/*
todo.vue

export default {
  beforeRouteEnter(to,from,next) {},
  beforeRouteUpdate(to,from,next) {
    // 可以根据 /:id 做一系列事情
  },
  beforeRouteLeave(to,from,next) {},
  data(){
    return{}
  }
}

*/