vue-router

简述：

前端路由的工作方式
① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中
总结：前端路由，指的是 Hash 地址与组件之间的对应关系！

目录结构

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router' //引用路由
import store from './store'
// 引入通用scss文件初始化样式
import '@/assets/styles/index.scss'
// 导入vant css
import 'vant/lib/index.css';
import 'vant/lib/icon/local.css'
// 适应屏幕宽度
import '@/assets/js/adapt.js'
// 引入全局组件
import '@/assets/js/global.js'
Vue.config.productionTip = false
router.beforeEach((to,from,next)=>{
   //路由导航钩子 - 对登录拦截
  if(to.meta.title){
   
    document.title=to.meta.title
  }
  next();
})
new Vue({
   
  router,//挂载
  store,
  render: h => h(App)
}).$mount('#app')

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
   
    return routerPush.call(this, location).catch(error => error)
}
const routes = [
  {
   
    path: '/register',
    name: 'register',
    component: ()=>import(/*webpackChunkName:"register"*/ "../views/recomA/register.vue"),
    meta: {
   
      title: '注册'
    }
  },
  // 重定向规则
 {
    path: '/', redirect: '/home' },
 // 子路由规则
 // 默认子路由：如果 children 数组中，某个路由规则的 path 值为空字符串，则这条路由规则，叫做“默认子路由”
 {
   
      path: '/about',
      component: About,
      // redirect: '/about/tab1',
      children: [
        {
    path: '', component: Tab1 },
        {
    path: 'tab2', component: Tab2 }
      ]
    },
  {
   
    path: '/', 
    name: 'register',
      component: ()=>import(/*webpackChunkName:"register"*/ "../views/recomA/register.vue"),
    meta: {
   
      title: '注册'
    }
  },
    {
   
        path: '/login',
        name: 'login',
        component: ()=>import(/*webpackChunkName:"register"*/ "../views/recomA/login.vue"),
        meta: {
   
            title: '登录'
        }
    },
  {
   
    path: '/activity',
    name: 'activity',
      component: ()=>import(/*webpackChunkName:"activity"*/"../views/recomA/activity.vue"),

    meta: {
   
      title: '活动'
    }
  },
  {
   
    path: '/updateInfo',
    name: 'updateInfo',
      component: ()=>import(/*webpackChunkName:"updateInfo"*/ "../views/recomA/updateInfo.vue"),
    meta: {
   
      title: '用户信息更新'
    }
  },
  {
   
    path: '/check',
    name: 'check',
      component: ()=>import(/*webpackChunkName:"check"*/ "../views/recomA/check.vue"),
    meta: {
   
      titl