2020前端技术面试必备Vue:(二)Router篇

npm install --save  vue-router

@ 如果你的Vue-Cli 是 3 的版本，可以在创建项目的同时，可以选择安装router 插件
vue ui

1. 创建好项目，自带的router文件就是路由配置文件



import Vue from 'vue'
//  引入  vue-router
import VueRouter from 'vue-router'
import Father from '../views/Father.vue'

2. 在全局使用这个vue-router
Vue.use(VueRouter)


3. 配置路由选项
const routes = [
  {
    path: '/',
    name: 'Father',
    component: Father,
    meta: {
      keepAlive: true // 需要缓存
    }
  }
]

3. 创建Vue-router实例，挂载router配置项
const router = new VueRouter({
  routes
})

4.最后导出  Vue-router实例， 提供给 Vue 挂载使用
export default router

import Vue from 'vue'
import App from './App.vue'
1. 引入 路由配置文件
import router from './router'
import store from './store'

Vue.config.productionTip = false

2. 将路由挂载到 Vue实例中使用。
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

const routes = [
  {
    1. 通过在url后：参数即可
    path: '/home/:name',
    name: 'home',
    component: Father,
    meta: {
      keepAlive: true // 需要缓存
    }
  }
]



2.接收路由参数：this.$route.params.路由参数

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}


当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：

1. this.$route.params.pathMatch  来获取通配符后的url

1. 通过在父路由中添加 children 数组，直接引入嵌套组件和配置path
2. 页面中使用 通过 <router-link to="/父路由path/嵌套path">小红</router-link>
3. 配置显示入口   <router-view></router-view>

{
    path: '/teacher',
    name: 'teacher',
    component: () => import('../views/Teacher/Teacher.vue'),
    children: [
      {
        path: 'xiaohong',
        component: () => import('../views/Teacher/XiaoHong.vue')
      },
      {
        path: 'xiaoming',
        component: () => import('../views/Teacher/XiaoMing.vue')
      }
    ]
  }

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123

1.声明式写法
<router-link :to="..." replace>
    
2.编程式写法
router.replace(...)

const routes = [
  {
    path: '/home:name',
    name: 'home',
    component: Father,
  }
]



1 通过命名路由来实现 路由跳转和传递参数
this.$router.push({ name: 'home'，{params:name='Test'}})

1. redirect: '/b'
2. 重定向的目标也可以是一个命名的路由：redirect: { name: 'foo' }

router.beforeEach((to, from, next) => {
    //我在这里模仿了一个获取用户信息的方法
  let isLogin = window.sessionStorage.getItem('userInfo');
    if (isLogin) {
        //如果用户信息存在则往下执行。
        next()
    } else {
        //如果用户token不存在则跳转到login页面
        if (to.path === '/login') {
            next()
        } else {
            next('/login')
        }
    }
})

1.给路由入口加入 transition


<transition>
  <router-view></router-view>
</transition>



2. 实现不同的过渡特效 ，组件内使用 <transition> 并设置不同的 name。
 <transition name="long">
      <div class="main">...</div>
  </transition>

1. 所有路由都放置在一个同步块中 .routerPath.js 中

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')


2. 在 router.js 中正常使用就可，使用 chunk name  来赋值 component
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }，
    { path: '/bar', component: Bar }，
    { path: '/baz', component: Baz }
  ]
})