Vue-Router面試題彙總

怎麼重定向頁面？

參考答案

第一種方法：

const router = new VueRouter({
    routes: [
        { path: '/a', redirect: '/b' }
    ]
})
複製代碼

第二種方法:

const router = new VueRouter({
    routes: [
        { path: '/a', redirect: { name: 'foo' }}
    ]
})
複製代碼

第三種方法：

const router = new VueRouter({
    routes: [
        { 
            path: '/a', 
            redirect: to =>{
                const { hash, params, query } = to
                if (query.to === 'foo') {
                    return { path: '/foo', query: null }
                }else{
                   return '/b' 
                }
            }
            
        }
    ]
})
複製代碼

怎麼配置404頁面？

參考答案

const router = new VueRouter({
    routes: [
        {
            path: '*', redirect: {path: '/'}
        }
    ]
})
複製代碼

切換路由時，須要保存草稿的功能，怎麼實現呢？

參考答案

<keep-alive :include="include">
    <router-view></router-view>
 </keep-alive>
複製代碼

其中include能夠是個數組，數組內容爲路由的name選項的值。

路由有幾種模式？說說它們的區別？

參考答案

• hash: 使用 URL hash 值來做路由。支持全部瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。
• history: 依賴 HTML5 History API 和服務器配置。
• abstract: 支持全部 JavaScript 運行環境，如 Node.js 服務器端。若是發現沒有瀏覽器的 API，路由會自動強制進入這個模式。

講一下完整的導航守衛流程？

參考答案

• 導航被觸發。
• 在失活的組件裏調用離開守衛beforeRouteLeave(to,form,next)。
• 調用全局的beforeEach(to,form,next)守衛。
• 在重用的組件裏調用 beforeRouteUpdate(to,form,next) 守衛。
• 在路由配置裏調用beforeEnter(to,form,next)路由獨享的守衛。
• 解析異步路由組件。
• 在被激活的組件裏調用beforeRouteEnter(to,form,next)。
• 在全部組件內守衛和異步路由組件被解析以後調用全局的beforeResolve(to,form,next)解析守衛。
• 導航被確認。
• 調用全局的afterEach(to,form)鉤子。
• 觸發 DOM 更新。
• 用建立好的實例調用beforeRouteEnter(to,from,next){ next(vm =>{//經過vm訪問組件實例}) } 守衛中傳給 next 的回調函數。

講一下導航守衛的三個參數的含義？

參考答案

• to：即將要進入的目標 路由對象。
• from：當前導航正要離開的路由對象。
• next：函數，必須調用，否則路由跳轉不過去。
  • next()：進入下一個路由。
  • next(false)：中斷當前的導航。
  • next('/')或next({ path: '/' }) : 跳轉到其餘路由，當前導航被中斷，進行新的一個導航。

在afterEach鉤子中可使用next()嗎？

參考答案

不能夠，不接受next的參數。

全局導航守衛有哪些？

參考答案

• router.beforeEach：全局前置守衛。
• router.beforeResolve：全局解析守衛。
• router.afterEach：全局後置鉤子。

什麼是路由獨享的守衛，怎麼使用

參考答案

是beforeEnter守衛

const router = new VueRouter({
    routes: [
        {
            path: '/foo',
            component: Foo,
            beforeEnter: (to, from, next) => {
            // ...
            }
        }
    ]
})
複製代碼

在組件內使用的導航守衛有哪些？

參考答案

• beforeRouteLeave：在失活的組件裏調用離開守衛。
• beforeRouteUpdate：在重用的組件裏調用。
• beforeRouteEnter：在進入對應路由的組件建立前調用。

在beforeRouteEnter導航守衛中能夠用this嗎？

參考答案

不能夠，由於守衛在導航確認前被調用,所以即將登場的新組件還沒被建立。

能夠經過傳一個回調給next來訪問組件實例。在導航被確認的時候執行回調，而且把組件實例做爲回調方法的參數。

beforeRouteEnter(to, from, next) {
    next(vm => {
        console.log(vm)
    })
}
複製代碼

說說你對router-link的瞭解

參考答案

<router-link>是Vue-Router的內置組件，在具備路由功能的應用中做爲聲明式的導航使用。

<router-link>有8個props，其做用是：

• to：必填，表示目標路由的連接。當被點擊後，內部會馬上把to的值傳到router.push()，因此這個值能夠是一個字符串或者是描述目標位置的對象。

  <router-link to="home">Home</router-link>
  <router-link :to="'home'">Home</router-link>
  <router-link :to="{ path: 'home' }">Home</router-link>
  <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
  <router-link :to="{ path: 'user', query: { userId: 123 }}">User</router-link>
  複製代碼

  注意path存在時params不起做用，只能用query
• replace：默認值爲false，若設置的話，當點擊時，會調用router.replace()而不是router.push()，因而導航後不會留下 history 記錄。
• append：設置 append 屬性後，則在當前 (相對) 路徑前添加基路徑。
• tag：讓<router-link>渲染成tag設置的標籤，如tag:'li,渲染結果爲<li>foo</li>。
• active-class：默認值爲router-link-active,設置連接激活時使用的 CSS 類名。默認值能夠經過路由的構造選項 linkActiveClass 來全局配置。
• exact-active-class：默認值爲router-link-exact-active,設置連接被精確匹配的時候應該激活的 class。默認值能夠經過路由構造函數選項 linkExactActiveClass 進行全局配置的。
• exact：是否精確匹配，默認爲false。

  <!-- 這個連接只會在地址爲 / 的時候被激活 -->
  <router-link to="/" exact></router-link>
  複製代碼

• event：聲明能夠用來觸發導航的事件。能夠是一個字符串或是一個包含字符串的數組，默認是click。

怎麼在組件中監聽路由參數的變化？

參考答案

有兩種方法能夠監聽路由參數的變化，可是隻能用在包含<router-view />的組件內。

• 第一種

  watch: {
      '$route'(to, from) {
          //這裏監聽
      },
  },
  複製代碼

• 第二種

  beforeRouteUpdate (to, from, next) {
      //這裏監聽
  },
  複製代碼

切換路由後，新頁面要滾動到頂部或保持原先的滾動位置怎麼作呢？

參考答案

• 滾動頂部

  const router = new Router({
      mode: 'history',
      base: process.env.BASE_URL,
      routes,
      scrollBehavior(to, from, savedPosition) {
          if (savedPosition) {
              return savedPosition;
          } else {
              return { x: 0, y: 0 };
          }
      }
  });
  複製代碼

• 滾動原先位置

在什麼場景下會用到嵌套路由？

參考答案

作個管理系統，頂部欄和左側菜單欄是全局通用的，那就應該放在父路由，而右下的頁面內容部分放在子路由。

如何獲取路由傳過來的參數？

參考答案

路由有三種傳參方式，獲取方式各不相同。

• meta：路由元信息，寫在routes配置文件中。

  {
      path: '/home',
      name: 'home',
      component: load('home'),
      meta: {
          title: '首頁'
      },
  },
  複製代碼

  獲取方式this.$route.meta.title獲取
• query：

  this.$route.push({
      path:'/home',
      query:{
          userId:123
      }
  })
  複製代碼

  瀏覽器地址：http://localhost:8036/home?userId=123 獲取方式：this.$route.query.userId
• params：這種方式比較麻煩。
  • 首先要在地址上作配置

    {
        path: '/home/:userId',
        name: 'home',
        component: load('home'),
        meta: {
            title: '首頁'
        },
    },
    複製代碼

  • 訪問傳參

    const userId = '123'
    this.$router.push({ name: 'home', params: { userId } })
    複製代碼

    注意用params傳參，只能用命名的路由（用name訪問），若是用path，params不起做用。 this.$router.push({ path: '/home', params: { userId }})不生效。
  • 瀏覽器地址：http://localhost:8036/home/123
  • 獲取方式：this.$route.params.userId

路由組件和路由爲何解耦，怎麼解耦？

參考答案

由於在組件中使用 $route 會使之與其對應路由造成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性，全部要解耦。

• 耦合如如下代碼所示。Home組件只有在http://localhost:8036/home/123URL上才能使用。

  const Home = {
      template: '<div>User {{ $route.params.id }}</div>'
  }
  const router = new VueRouter({
      routes: [
          { path: '/home/:id', component: Home }
      ]
  })
  複製代碼

• 使用 props 來解耦
  • props爲true，route.params將會被設置爲組件屬性。
  • props爲對象，則按原樣設置爲組件屬性。
  • props爲函數，http://localhost:8036/home?id=123,會把123傳給組件Home的props的id。

  const Home = {
      props: ['id'],
      template: '<div>User {{ id }}</div>'
  }
  const router = new VueRouter({
      routes: [
          { path: '/home/:id', component: Home, props: true},
          // 對於包含命名視圖的路由，你必須分別爲每一個命名視圖添加 `props` 選項：
          {
              path: '/home/:id',
              components: { default: Home, sidebar: Sidebar },
              props: { default: true, sidebar: false }
          }
          { path: '/home/:id', component: Home, props: {id:123} },
          { path: '/home/:id', component: Home, props: (route) => ({ id: route.query.id }) },
      ]
  })
  複製代碼

說說active-class是哪一個組件的屬性？

參考答案

<router-link/>組件的屬性，設置連接激活時使用的 CSS 類名。默認值能夠經過路由的構造選項 linkActiveClass 來全局配置。

在vue組件中怎麼獲取到當前的路由信息？

參考答案

經過this.$router來獲取

怎樣動態加載路由？

參考答案

使用Router的實例方法addRoutes來實現動態加載路由，通常用來實現菜單權限。

使用時要注意，靜態路由文件中不能有404路由，而要經過addRoutes一塊兒動態添加進去。

const routes = [
    {
        path: '/overview',
        name: 'overview',
        component: () => import('@/views/account/overview/index'),
        meta: {
            title: '帳戶概覽',
            pid: 869,
            nid: 877
        },
    },
    {
        path: '*',
        redirect: {
            path: '/'
        }
    }
]
vm.$router.options.routes.push(...routes);
vm.$router.addRoutes(routes);
複製代碼

怎麼實現路由懶加載呢？

參考答案

function load(component) {
    //return resolve => require([`views/${component}`], resolve);
    return () => import(`views/${component}`);
}

const routes = [
    {
        path: '/home',
        name: 'home',
        component: load('home'),
        meta: {
            title: '首頁'
        },
    },
]
複製代碼

路由之間是怎麼跳轉的？有哪些方式？

參考答案

• 聲明式 經過使用內置組件<router-link :to="/home">來跳轉
• 編程式 經過調用router實例的push方法router.push({ path: '/home' })或replace方法router.replace({ path: '/home' })

若是vue-router使用history模式，部署時要注意什麼？

參考答案

要注意404的問題，由於在history模式下，只是動態的經過js操做window.history來改變瀏覽器地址欄裏的路徑，並無發起http請求，當直接在瀏覽器裏輸入這個地址的時候，就必定要對服務器發起http請求，可是這個目標在服務器上又不存在，因此會返回404。

因此要在Ngnix中將全部請求都轉發到index.html上就能夠了。

location / {
  try_files  $uri $uri/ @router index index.html;
}
location @router {
    rewrite ^.*$ /index.html last;
}
複製代碼

route和router有什麼區別？

參考答案

route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。 而router是「路由實例對象」，包括了路由的跳轉方法，鉤子函數等。