Vue基础第二篇-Vue-Router

上篇文章说完了整个项目搭建，现在来说一下Vue-router。（我表示996很开心，就是感觉时间很挤喽。）

一、编写router文件夹下的index.js

引入对应的页面(.vue文件)

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//下面用了两种方式引入vue文件，建议选择未注释的。 后面会说到项目的优化。
//import index from '@/pages/index/index' 
const index = ()=>import('@/pages/index/index')
const active = ()=>import('@/pages/active/active')
const shopcart = ()=>import('@/pages/shopcart/shopcart')
const mine = ()=>import('@/pages/mine/mine')
const email = ()=>import('@/pages/email/email')


const routes = [
  {path:'/',name:'index',component:index,meta:{title:'首页',requireAuth:true}},
  {path:'/active',name:'active',component:active,meta:{title:'活动页'}},
  {path:'/shopcart',name:'shopcart',component:shopcart,meta:{title:'购物车'}},
  {path:'/mine',name:'mine',component:mine,meta:{title:'我的'}},
  {path:'/email',name:'email',component:email,meta:{title:'邮件'}},
  {path:'*',name:'404',components:xxxx,meta:{title:'页面找不到喽'}}
]
const router = new Router({
  mode:"history", //mode为history时，需要后台配置一下,具体https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
  routes,
  scrollBehavior (to, from, savedPosition) {
// 如果是购物车页面scrollTop:100
//  if(to.name == 'shopcart'){ 
//    return {x:0,y:100}
//  }
  } 
});

/*
   下面是路由的全局钩子函数
**/
//这是全局路由跳转前触发的函数
router.beforeEach((to,from,next)=>{
  //可以做登录拦截。 需要登录的路由后面加上requireAuth:true 就可以
  if(to.matched.some(r => r.meta.requireAuth)){
// You can do something
  }
  document.title = to.meta.title;
  next();
})
//这是全局路由跳转后触发的函数
router.afterEach((to,from)=>{
    //不接受next函数，并且不能改变导航本身
})

二、router-link的使用

router-link 跳转模式分为 push 和 replace,大家看一下下图：（PS：我前端不是切图仔！）

总结一下就是  replace跳转 会使当前页面出栈，目标页面入栈， push跳转会使当前页面和目标页面都入栈