基本的vue路由配置

vue是一個單頁面應用，全部頁面跳轉都是經過路由來實現
下面開始路由的配置：{路由文件：router中的index.js文件}
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
引入並使用路由

const home = () => import('../views/home-index.vue');
//開始咱們先引入一個路由頁面{使用了路由懶加載，和圖片懶加載的道理差很少，只有在跳轉的時候纔會加載出來，防止首次進入的時候消耗過多的時間}
const routes = [{
  path: '/',
  name: 'home',
  component: home,
}, {
  path: '/signIn',
  name: 'signIn',
  component: signIn,
  meta: {
    title: '登陸'
  },]
//這裏我配置了兩個路由{沒有所有引入}
})

export default router

首先開始介紹屬性：
path：這個是地址欄上面顯示的值{例：www.taobao.com/user。這裏user就是那個path}

name：一個命名相似於給這個路由添加了一個id在組件中使用路由跳轉的時候會用到{編程式導航}相似於window.open那種

component：這個值算是比較關鍵的就是組件的名字，要和引入時的值保持對應，好比：path：user對應user的組件

在實際開發中可能會遇到一些問題；我想在首頁路由中切換一部分怎麼辦？在登陸和註冊頁面進行路由相互調換怎麼辦？
路由還提供了一種children模式

const routes = [{
  path: '/',
  name: 'home',
  component: home,
  children: [{ // home的子組件
    path: '',
    name: 'homeIndex',
    component: homeIndex
  }, {
    path: '/user',
    name: 'user',
    component: user,
  }]
} ]

咱們建立一個children數組在數組中建立路由對象就能夠了，
在組件中仍是正常跳轉

const router = new VueRouter({
// mode: 'history', //取消歷史模式
// base: '/dist',
routes
})