基本的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
})