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

vue笔记之vue-router的使用（包括ssr中的使用）

安装vue-router

命令行执行：

npm i vue-router -S

创建配置文件

在项目src文件夹下创建config文件夹存放路由配置

在config文件夹下新建router.js和routes.js

• router.js: 存放路由设置
• routes.js: 存放理由映射规则

路由映射规则配置

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')

app.vue配置

在app.vue中加入：

<router-view></router-view>

给router-view添加切换动画：

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

css:

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

router中使用props

路由之前传参可以使用this.$route拿到参数也可以使用props：

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

在login页面的export default添加props:

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

浏览器访问得到结果： 

浏览器访问得到结果：

其他配置属性

base:

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

设置base之后浏览器访问页面路由path前面会自动加上base配置的值

scrollBehavior :

//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() // 导航守卫-startrouter.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')})// 导航守卫-endnew 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) => {      //...    }},

以上为个人经验，希望能给大家一个参考，也希望大家多多支持猪先飞。