vue中vue-router的使用说明(包括在ssr中的使用)

npm i vue-router -S

import Login from '../views/login/login .vue'
// import 组件名 from '组件路径'
import Register from '../views/register/register.vue'
import ChildrenVue from '../views/children/children.vue'
export default [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: Login ,
    name: 'login',
    meta: { //保存页面信息
      title: 'this is Login ',
      description: 'this is Login description'
    },
    children: [ //子路由
      {
         path: '/children',
         component: ChildrenVue
      }
    ]
  },
  {
    path: '/register',
    component: Register,
    name: 'register'
  }
]

import Router from 'vue-router' 
import routes from './routes' //导入router 映射规则
const router =  new Router({
   routes
})
export default router

import Router from 'vue-router' 
import routes from './routes' //导入router 映射规则
//每次import都创建一个新的router 避免内存溢出
export default () => {
   return new Router({
     routes,
     mode: 'history' //改为history模式方便服务端渲染做SEO
   })
}

import Vue from 'vue'
import VueRouter from 'vue-router'
import createRouter from './config/router' //导入router配置文件
Vue.use(VueRouter)
const router = createRouter() 
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#root')

<router-view></router-view>

<transition name="fade">
  <router-view></router-view>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

{
    path: '/login',
    props: (route) => ({id: route.query.id}),
    component: Login,
},

export default {
  props: ['id'],
  mounted () {
    console.log(this.id) //打印传递的参数
  },
}

export default () => {
  return new Router({
    routes,
    mode: 'history',
    base: '/base/'
  })
}

//scrollBehavior 记录页面滚动的位置下次进来直接滚动到记录的位置
export default () => {
  return new Router({
    routes,
    mode: 'history',
    scrollBehavior (to, from, savedPosition) {
       //savedPosition 记录的位置 如果没有返回最初位置
      if (savedPosition) {
        return savedPosition
      } else {
        return {x: 0, y: 0}
      }
    }
  })
}

import Vue from 'vue'
import VueRouter from 'vue-router'
import createRouter from './config/router' //导入router配置文件
Vue.use(VueRouter)
const router = createRouter() 
// 导航守卫-start
router.beforeEach((to, from, next) => {
  console.log('before each invoked')
  next()
})
router.beforeResolve((to, from, next) => {
  console.log('before resolve invoked')
  next()
})
router.afterEach((to, from) => {
  console.log('after each invoked')
})
// 导航守卫-end
new Vue({
  router,
  render: (h) => h(App)
}).$mount('#root')

const footer = {
  template: `<div>footer</div>`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

{
    path: '/login',
    component: Login,
    beforeEnter: (to, from, next) => {
      //...
    },
    beforeResolve: (to, from, next) => {
      //...
    },
    afterEach: (to, from, next) => {
      //...
    }
},